[OAuth] Google+でログイン

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」は、上記８番からデータを転機 「data-cookiepolicy」は、ページのドメインをセット

とりあえずの登録完了

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