[OAuth] Google+でログイン

2015年7月6日

Javascript セキュリティ

2015年4月にgoogleがOpenID ver2のサービスを停止したので、「Google+」OAuthを使って、Gmailユーザーの簡易ログインに切り替える必要が出てきた。 簡単なやり方をメモしておくことにする。

注意事項

GoogleのOAuth認証は、バージョンが変わって、今回のコードでは動かなくなっています。 新しい記事は、下記を御覧ください。 [2022年版] GoogleOAuth認証の書き方

アカウントでIDの取得設定

https://console.developers.google.com/

1.プロジェクト作成ボタンをクリック

2.プロジェクト名を入力して作成ボタンをクリック

3.APIと認証メニューをクリック

4.認証情報メニューをクリックして、「新しいクライアントIDを作成」ボタンをクリック

5.webアプリケーションがデフォルトで選択されているので、そのまま作成ボタンをクリック

6.必須項目のサービス名のみ入力して、「保存」ボタンをクリック

7.必要情報の入力

・webアプリケーションがデフォルトで選択されているのを確認 ・JS生成元はサイトのURLを記述 ・リダイレクトURIに認証後のリダイレクト先を入力 ※この情報は後から変更(修正)できます

8.クライアントID、シークレットコードを確認

事前準備完了

これでAPIを利用する準備が整いました。

実装方法

以下のコードを対象ページに追加することで、OAuthログインが可能になります。 <script type="text/javascript"> setTimeout( (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); })(),1000); function signinCallback(authResult) { if (authResult['access_token']) { // 認証済み document.getElementById("message").innerHTML="login"; } else if (authResult['error']) { // エラー処理 } } </script> <span id="signinButton"> <span class="g-signin" data-callback="signinCallback" data-clientid="*****" data-cookiepolicy="http://ideacompo.com" data-requestvisibleactions="http://schemas.google.com/AddActivity" data-scope="https://www.googleapis.com/auth/plus.login"> </span> </span> 「data-clientid」は、上記8番からデータを転機 「data-cookiepolicy」は、ページのドメインをセット

とりあえずの登録完了

ボタンの設置は完了できましたが、 ・登録時にエラーが出て困った時の対処方法 ・連動ログインから自動で取得出来る情報 なども別の機会にメモしたいと思います。

このブログを検索

ごあいさつ

このWebサイトは、独自思考で我が道を行くユゲタの少し尖った思考のTechブログです。 毎日興味がどんどん切り替わるので、テーマはマルチになっています。 もしかしたらアイデアに困っている人の助けになるかもしれません。