Google のログイン機能を利用出来ないかとGoogle oAuthを調べてみたよ。
Google のログイン機能を利用出来ないかとGoogle oAuthを調べてみたよ。
Google oAuth 2.0を利用し、ログイン認証はGoogle+ の認証機能を利用することになるらしい。
Google APIs Consoleでの設定は一通りWebから情報収集が可能なので特に困ることもなく、Terminal等で一連のoAuth2.0のフローもだいたい理解した。
※refresh_tokenがデフォルトではこないので注意。
次に、クライアント側でJavascriptを利用したログイン&Google+情報の取得はサンプルスクリプトから完了。Google+ ログインを参考にすればいける。
クライアントサイドでメールアドレスの取得とか、コピペ職人でもできるね。
さて、Google+のoAuth2.0ログイン(アクセストークン応答でログイン成功)認証完了のスクリプトは本当にリファレンスのコピペでいけましたよー。
index.html (goole+のログイン情報をコピペしたサンプルスクリプト)
※Client_idは変更してね。
<!-- ファイル index.html の先頭 --> <html itemscope itemtype="http://schema.org/Article"> <head> <!-- ここから前提条件 --> <script type="text/javascript"> function signinCallback(authResult) { if (authResult['access_token']) { // 正常に承認されました // ユーザーが認証されたのでログイン ボタンを非表示にします。例: document.getElementById('signinButton').setAttribute('style', 'display: none'); //追加部分-------------- var info = document.getElementById('info'); var textNode = document.createTextNode("Google+にログインできた。"); info.appendChild(textNode); //---------追加部分終わり } else if (authResult['error']) { // エラーが発生しました。 // 可能性のあるエラー コード: // 「access_denied」 - ユーザーがアプリへのアクセスを拒否しました // 「immediate_failed」 - ユーザーを自動的にログインできませんでした // console.log(「There was an error: 」 + authResult[「エラー」]); } } </script> <!-- ここまで前提条件 --> </head> <!-- ... --> <body> <span id="signinButton"> <span class="g-signin" data-callback="signinCallback" data-clientid="CLIENT_ID" data-cookiepolicy="single_host_origin" data-requestvisibleactions="http://schemas.google.com/AddActivity" data-scope="https://www.googleapis.com/auth/plus.login"> </span> </span> <div id="info"></div> <!-- この非同期 JavaScript を </body> タグの直前に置きます --> <script type="text/javascript"> (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/client:plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })(); </script> </body> </html>