ソーシャルIDログイン簡単セットアップ

#開発コラム

schedule　2018/09/25　 refresh　2023/11/08

 

 

ソーシャルIDログイン簡単セットアップ

Webサービスや、ECサイトなどの会員登録では、煩雑なフォーム入力がユーザーにとって大きな手間となり、サイトから離脱してしまうことがサイト運営側にとって大きな悩みとなっていました。

 

ソーシャルログイン（以下SNSログイン）はGoogleやFacebookに代表されるソーシャルネットワーキングサービスのアカウント情報で会員登録が可能になり、ユーザーにフォーム入力の手間を解消し、パスワードを覚える必要もなくなります。

 

それでは、ソーシャルIDログイン簡単セットアップ方法を紹介させていただきます。

 

 

Facebook

Facebook公開のドキュメントはこちらです。

 

１．まずFacebookへログインし、開発者サイトへ移動


２．「新しいアプリを追加」ボタンをクリック、表示名を入力し、「アプリIDを作成してください」をクリックすると製品追加画面に遷移されます。次は「Facebookログイン」の設定ボタンを選択する。

 

３．そして左側「Facebookログイン」の設定をクリック、「有効なOAuthリダイレクトURI」に認可コート受け取れるスクリプトを設定します。
※認可コードを受け取るため、ブラウザからアクセスできるURLに設定してください。

 

ここまで、Facebook側最低限の設定三つのステップだけで完了！

 

次はサーバー側（Facebookアカウント情報受け取るため）の対応です。

 

続いて、先程の画面左上の「設定」の「ベーシック」をクリック「アプリID」と「app secret」を取得し、Facebookへリクエスト際に入れ替えてください。

 

１．まず認可コードを取得する。下記のURLにアクセスすると認可コードがリダイレクトされると伴いクエリストリングから受け取れます。

 

https://www.facebook.com/v2.8/dialog/oauth?client_id=「アプリID」&redirect_uri=「有効なOAuthリダイレクトURI」&state=「任意」&response_type=code&scope=public_profile%20email

 ※このURLアクセスするとFacebookへの認証が要求されます。ユーザーログインしますと、「あなたのアプリ（サイト）へ情報渡すいいですか」という認可画面が表示され、ユーザーに承認してもらう必要があります。ユーザー同意の上で、Facebook発行した認可コードをクエリストリングで「有効なOAuthリダイレクトURI」に付け、リダイレクトとして送られてきます。

 

 

果たして、次のようなサンプルリダイレクトが返してくれます。

https://localhost/parse_code?code=「認可コード」&state=mystate

 

２．そして、認可コードを用いて、下記のURLでアクセストークンを取得する。

https://graph.facebook.com/v2.8/oauth/access_token?client_id=「アプリID」&redirect_uri=「有効なOAuthリダイレクトURI」&client_secret=「app secret」&code=「認可コード」

 
次のようなサンプルレスポンスが返してくれます。

 

{
    "access_token": "EAADuU9GB2qcBAI552v9UDzf0GdJyniVLhN76nQQU8jJu9m27H3smyumAbzVawUdxi3kOHhbFZANulDQEidNr6LlsjcShWTEe7wBNzP9izxT92dU8sN2zYIvRftKxRKXeSIaJG3onXlQcBkTeQ2az7sY1zedo51LQNrsYgTnE3cAcSsua5",
    "token_type": "bearer",
    "expires_in": 5183380
}

 

 

３．最後は、アクセストークンを用いて、ユーザ情報を取得する。
下記のURLをアクセスすると、次のようなサンプルレスポンスが返してくれます。

 

https://graph.facebook.com/me?fields=email,gender&access_token=「アクセストークン」

 

{
"email": "mymail@example.com",
"id": "10215933396712345"
}

ユーザ情報の取得ができました。おめでとうございます！

 

 

Google

 

Google公開のドキュメントはこちらです。

 

まずGoogleへログインし、開発者サイトへ移動

 

１．画面の左上Google APIロゴの隣プロジェクト選択に「新しいプロジェクト」ボタンをクリック、「プロジェクト名」、「組織」と「場所」を入力し、「作成」をクリックすると、ダッシュボードが表示されます。

 

２．先に「OAuth 同意画面」の設定を行います。ユーザ認可の同意画面に表示される情報を設定します。
「メールアドレス」と「ユーザーに表示するサービス名」は必須でございます。他の項目は省略可能です。

 

３．「保存」ボタンを押下した後に、「認証情報を作成」をクリック、「OAuth クライアント ID の作成」を選択してください。

 

Facebookと同様に「ウェブ アプリケーション」を選んでください。「承認済みのリダイレクト URI」を入力し、「作成」ボタンを押下するとGoogle側も最低限の設定三つのステップで完了！

 

完了後表示される「クライアント ID」と「クライアント シークレット」を取得し、Googleへリクエスト際に入れ替えてください。

 

次はサーバー側（Googleアカウント情報受け取るため）の対応です。

１.下記のURLにアクセスすれば、認可コードがリダイレクトされると伴いクエリストリングから受け取れます。

https://accounts.google.com/o/oauth2/v2/auth?scope=email%20profile&state=mystate&redirect_uri=「承認済みのリダイレクト URI」&response_type=code&client_id=「クライアント ID」

 ※このURLはGoogleへの認証が必要です。ユーザーログインしますと、「あなたのアプリ（サイト）へ情報渡すいいですか」という認可画面が表示され、ユーザーから承認もらう必要があります。

 

ユーザー同意の上で、Google側発行した認可コードをクエリストリングに付け、「承認済みのリダイレクト URI」へリダイレクトしてくれます。

 

次のようなサンプルリダイレクトが返してくれます。

https://localhost/parse_code?state=mystate&code=「認可コード」&scope=https://www.googleapis.com/auth/userinfo.email+https://www.googleapis.com/auth/userinfo.profile#

 

２．そして、認可コードを用いて、下記のURLでアクセストークンを取得する。

https://www.googleapis.com/oauth2/v4/token

 
POSTデータ：

code=「認可コード」&client_id=「クライアント ID」&client_secret=「クライアント シークレット」&redirect_uri=「承認済みのリダイレクト URI」&grant_type=authorization_code

 
※ FacebookはGETでもよいですが、GoogleはPOSTだけが受けられます。
正しく設定すれば、次のようなサンプルレスポンスが返してくれます。

 

{
    "access_token": "ya29.Ci-BAxEvA8miw-15umAg9OiBNbQfmsf1KzRTXXGgWMvaVi7kuSQAq7hMH7Bcq8NDRA",
    "token_type": "Bearer",
    "expires_in": 3600,
    "id_token": "eyJhbGciOiJSUzI1NiIsImtpZCI6ImU4Y2YxNjhlODBiNjVhOTY3MzJjMTFhNGIwMTRmMmUyMjk5ODUyNzAifQ....＜省略＞"
}		 
 

 

３．最後は、アクセストークンを用いて、ユーザ情報を取得。
下記のURLをアクセスすると、次のようなサンプルレスポンスが返してくれます。

 

https://www.googleapis.com/oauth2/v3/userinfo?access_token=「アクセストークン」

 

{
    "sub": "107212749589384520707",
    "name": "名前",
    "given_name": "名",
    "family_name": "姓",
    "profile": "https://plus.google.com/107212749589384512345",
    "picture": "https://lh3.googleusercontent.com/-eri4--CL5TY/AAAAAAAAAAI/AAAAAAAAAAA/oxnwIGhVsDg/photo.jpg",
    "email": "mymail@example.com",
    "email_verified": true,
    "gender": "male",
    "locale": "ja-JP"
}		 
 

おめでとうございます！

同じ三つのステップでGoogleとの連携は完了です。