More than 3 years have passed since last update.

Googleでのソーシャルログインを簡単に試してみる

Posted at 2020-02-03

APIの開発でGoogleログインを実装する必要がありました。
無知な私は当初、「画面(フロントサイド)がないとすぐ確認できないんじゃん？」と尻込みしていたわけですが。
意外と簡単に機能を試すことができたので、その手順を残しておきます。

前提

Googleログインの一連の流れを実現するために上記を設定・取得します。
私は個人のGoogleアカウントを使って試しましたが、組織のアカウントでも基本的に問題はないのではないかと思います。
今回の範囲では、特に課金の要求などはありませんでした。

メニューのAPIとサービス > 認証情報より認証情報設定ページへ
認証情報を作成ボタンからOAuth クライアントID を選択
アプリケーションの種類を選んだら下記のような画面になる
名前
- わかりやすいもの
承認済みのリダイレクトURI
- とりあえず試してみたい段階であれば、
  - googleのhttps://www.google.co.jp/ を使わせてもらう
  - http://localhost/(動いている場合)
- 本番運用するならきちんとしたURIを設定してください
作成ボタンを押すと、「クライアントID」「クライアントシークレット」が取得できる

APIとサービス > OAuth同意画面より設定ページへ
- ここで設定する内容が、よくソーシャルログイン画面で見る「〇〇が次の許可をリクエストしています」の画面に反映される
アクセスできるユーザーのデータは、デフォルトでは「email」「profile」「openid」のみの模様
保存ボタンを押して設定完了

設定が完了したので、実際に動きを確かめていきます。

以下のURLを組み立ててアクセスする
- https://accounts.google.com/o/oauth2/auth?response_type=code&client_id=<クライアントID>&redirect_uri=<リダイレクトURI>&scope=<スコープ>&access_type=offline&approval_prompt=force
- スコープには email profile などが入る(%20で複数連結も可能)
  - (参考) https://himakan.net/websites/how_to_google_oauth
アクセスすると、以下のようなアカウント選択画面に遷移するので、選択して移動する
リダイレクトURIに設定したページに遷移するので、code パラメータを取得する

以下のURLにPOSTでアクセスする
- https://www.googleapis.com/oauth2/v4/token
- Content-Type
  - application/x-www-form-urlencoded
- Body
  - code:<コード>
  - client_id:<クライアントID>
  - client_secret:<クライアントシークレット>
  - redirect_uri:<リダイレクトURI>
  - grant_type:authorization_code
  - access_type:offline
curlコマンド打つのは大変なので、 ARC というchrome拡張機能を使うのがおすすめ
- https://chrome.google.com/webstore/detail/advanced-rest-client/hgmloofddffdnphfgcellkdfbfbjeloo?hl=ja
成功したら、 access_token が取得できる

以下のURLにGETでアクセスする
- https://www.googleapis.com/oauth2/v1/userinfo?access_token=<アクセストークン>
後半の手順1.で設定したスコープの情報が取れれば成功！

以上、とりあえずGoogleログインの動きを確認したいよーという場合の実行手順でした。
開発の助けになれば幸いです。