SNS連携やってみた!OAuth2の処理の流れまとめてみる


OAuth2_process01
あるサイト制作でSNSを使った会員登録やログインを実装してみました。そのとき、FaceBookやGoogle+そしてYahoo!など多くのSNSでOAuth2という認証方式を使っていたので、その処理の流れを備忘録としてまとめます。

事前準備

OAuth2_process02
会員ページがあるサイトは多いです。ですが、会員ページの登録ってユーザさん(サイトを訪れる人)には結構面倒なんですよね。少しでも手間を楽にしたら登録してくれる人も多くなるはずと、最近ではSNSを使ったログインが多くなりました。
クライアント(サイト制作者)はSNS(GoogleやFaceBookなどのサービスプロバイダー)を使ったログインをするため、サービスプロバイダーに使わせてくださいと登録します。そこで使う権限などを登録してAPIを利用するためのIDなどを発行してもらいます。

Google、FaceBookそしてYahooの登録は以下の通り。各developerページをもってます。

サイトにSNSログインボタンなどを設置

OAuth2_process03
クライアントはSNSのサービスプロバイダーからIDなどを発行してもらいました。各SNS指定のフォーマットでIDなどをパラメータに付与してリンクを作ります。ユーザさんはこのリンク先になったログインボタンなどをクリックし、しばらくサービスプロバイダーとのやり取りを行います。リンクには戻り先のURLもパラメータとして付与するので、ユーザさんとサービスプロバイダーのやり取りが終わると自分のサイトに戻ってきます。

ユーザさんの同意

OAuth2_process04
ユーザさんはサービスプロバイダーへのリンクの貼ったログインボタンをクリックします。サービスプロバイダーはリンクのパラメータのIDなどをみて、どのクライアントがユーザのアカウントを使いたいか調べます。また、パラメータかサービスプロバイダーの管理画面の設定などをみて、クライアントが操作できる権限を確認しユーザにこれらの権限を使わせてよいか確認します。サービスプロバイダーさんはユーザーさんの同意結果を戻り先にパラメータとして送ります。

ユーザさんの同意結果を受け取る

OAuth2_process05
サービスプロバイダーはユーザさんからの同意結果をクライアントの指定した戻り先に返します。そのとき、ユーザーさんが同意したならば一時的な仮コードを付与します。大体一回しか使えないコードで二度目使うとAPIからエラーが返ってくることが多いです。

アクセストークンの取得

OAuth2_process06
取得した仮コードとサービスプロバイダーで登録時にIDと一緒に発行されたセキュリティコードなどをパラメータ付与し、通信でサービスプロバイダーに送信します。特にセキュリティコードなどは外部に漏れたら大変なのでソケット通信など外部に漏れないように!仮コードでクライアントを特定できて、そのクライアントしかしらない秘密のセキュリティコードで本人かどうか確認します。サービスプロバイダーは本人確認できたらアクセストークンを通信で返します。

このアクセストークンは、ユーザさんの許可された範囲内で操作できる別のIDとPWをもらったようなもの。絶対に外部に漏らしてはいけない。
ここまでで、OAuth2を使ったアクセストークンの取得までの流れは終わり!

おまけ

OAuth2_process07
アクセストークンがあれば、そのユーザさんのアカウントに対して権限の範囲でいろいろな操作ができます。非公開の情報を取得したり投稿したりなど。
SNSログインであれば、ユーザ情報を取得してSNSユーザIDや名前、住所などを取得します。SNSユーザIDと自社サイトの会員IDを紐づければ次からはSNSログイン時にSNSユーザIDが分かれば自社サイトの会員がわかりますね。SNSログインと同時に自社サイトログインできます。また新規の場合、SNSの名前や住所などをはじめから入力欄に補完しといてあげれば入力手間が省けますね。

以上


[facebook API 関連記事]

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です