Hello.js

oauthでGoogleなどアカウントを利用したユーザー認証

loginData

各メディアで認証設定しておく必要がある

googleの例

redirect_uriのドメインを登録しておく

https://console.developers.google.com/apis/credentials/oauthclient/1042086473659.apps.googleusercontent.com?project=api-project-1042086473659

リダイレクト先のスラッシュ忘れなど注意

間違えると以下のようなエラー文のポップアップになる。

400. That’s an error.
Error: redirect_uri_mismatch
The redirect URI in the request, http:// , does not match the ones authorized for the OAuth client. Visit http://console.developers.google.com/apis/credentials/oauthclient/clientID .apps.googleusercontent.com?project=xxxxxxx to update the authorized redirect URIs.


  view source
  JavaScript
  var FACEBOOK_CLIENT_ID = '';
var WINDOWS_CLIENT_ID = '';
var GOOGLE_CLIENT_ID = '1042086473659.apps.googleusercontent.com';
hello.init({ 
	facebook : FACEBOOK_CLIENT_ID,
	windows  : WINDOWS_CLIENT_ID,
	google   : GOOGLE_CLIENT_ID
},{redirect_uri: 'https://hi0a.com/demo/-js/js-login-oauth2-hello/' });


document.getElementById('login').addEventListener('click', function(){
  hello('google').login();
});


hello.on('auth.login', function(auth){
	
	// call user information, for the given network
	hello( auth.network ).api( '/me' ).then( function(r){
		// Inject it into the container
		var label = document.getElementById( "profile_"+ auth.network );
		if(!label){
			label = document.createElement('div');
			label.id = "profile_" + auth.network;
			document.getElementById('loginData').appendChild(label);
		}
		label.innerHTML = '<img src="'+ r.thumbnail +'" /> Hey '+r.name;
	});
});

  CSS
  #login{
  margin:20px auto;
  display:block;
  font-size:120px;
}

#loginData{
  border:12px solid #000;
  padding:12px;
}
  HTML
  
    ページのソースを表示 : Ctrl+U , DevTools : F12
    view-source:https://hi0a.com/demo/-js/js-login-oauth2-hello/
  
  ABOUT
  
    hi0a.com 「ひまアプリ」は無料で遊べるミニゲームや便利ツールを公開しています。
    プログラミング言語の動作デモやWEBデザイン、ソースコード、フロントエンド等の開発者のための技術を公開しています。
    必要な機能の関数をコピペ利用したり勉強に活用できます。
    プログラムの動作サンプル結果は画面上部に出力表示されています。
    環境:最新のブラウザ GoogleChrome / Windows / Android / iPhone 等の端末で動作確認しています。
    画像素材や音素材は半分自作でフリー素材配布サイトも利用しています。LINK参照。
    動く便利なものが好きなだけで技術自体に興味はないのでコードは汚いです。
    途中放置や実験状態、仕様変更、API廃止等で動かないページもあります。