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」は、ページのドメインをセット
とりあえずの登録完了
ボタンの設置は完了できましたが、
・登録時にエラーが出て困った時の対処方法
・連動ログインから自動で取得出来る情報
なども別の機会にメモしたいと思います。
0 件のコメント:
コメントを投稿