Facebookのソーシャルログインについて

f:id:ryoutaku_jo:20190208231153p:plain

【結論】
・ソーシャルログインとは、
 既存のSNSアカウントを利用して、
 他サイトへのログインやアカウント登録が可能な仕組み

FacebookGoogleTwitterなど
 各SNSで提供されている


【目次】


【本題】

ソーシャルログインの実装に挑戦した

現在製作中のアプリでFacebookGoogleログインを
実装することにしたので、実装方法を調べてみることにしました。

ソーシャルログインとは

FacebookGoogleなどが提供しているサービスで、
自サイトのユーザー認証機能に取り込むことで、
ユーザーが自身のSNSアカウントで会員登録やログインが出来る仕組みです。

ユーザー側には下記の様なメリットがあります。
・会員登録時の面倒な入力作業が短縮出来る
・再ログインが簡単に行える

その為、UX向上の為、欠かせない機能の一つと言えます。

ソーシャルログインの流れ

大まかに説明すると、下記の様な流れです。

1:サイト側で、ソーシャルログインのリンクを設置
2:ユーザーは、そのリンクからソーシャルメディアの認証用URLに飛ぶ
3:ユーザーは、ソーシャルメディア内でログイン(ログイン済みなら不要)
4:ユーザーが、サイトへの情報提供を許可
5:サイト側が予め指定したリダイレクトURLへ飛ぶ
6:サイト側でログイン処理
7:ログイン完了

Facebookログインとは

Facebookのアカウントと連携させることで、
簡単にアカウントの作成やログインが可能になる機能です。

Facebookでは、下記の様に機能紹介をされています。

Facebookログインを利用すると、素早く簡単にアカウントを作成し、
複数のプラットフォームでアプリにログインできます。
iOSAndroid、ウェブ、Windows Phone、デスクトップアプリ、スマートテレビ
IoT (Internet of Things)オブジェクトなどの機器で利用できます。
Facebookログインでは、認証と、アクセス許可をリクエストして利用者のデータに
アクセスするという2つのシナリオに対応しています。
Facebookログインは認証だけに使用することも、認証とデータアクセスの両方に使用することもできます。

developers.facebook.com

Facebookで紹介されている実装方法

Facebookでは、下記の様に実装方法を紹介しています。

1:利用者を自分のsuccessful-loginページに案内するためのリダイレクトURLを入力します。
2:ログインステータスを確認します。利用者がアプリにログイン済みかどうかを確認します。
  このステップでは、現在はログインしていないが以前にアプリにログインしたことがあるかどうかも確認する必要があります。
3:ログインボタンかログインダイアログで利用者にログインを促し、一連のデータへのアクセス許可をリクエストします。
4:利用者にログアウトを促し、アプリを終了します。

developers.facebook.com

gem(omniauth)での実装方法

その他にも、railsであれば「omniauth」というgemで実装可能です。

github.com

総括

まだgemのリファレンスを全て読み切れていない為、
どのくらいで実装できるのか定かでは無いですが、
UX向上に不可欠である以上、理解できる様になっていたい技術だと考えています。

実装方法が理解できれば、まだブログにまとめたいと思います。

《今日の学習進捗》

チーム開発:13日目
既に作成済みのビューをルーティングし、
本番環境で見れる様に調整。
デプロイでunicornが起動しなかったり、
マイグレーションファイルの更新ミスでMySQLを一旦アンインストールしたりと、
バタバタした一日でした。

学習開始からの期間 :63日
今日までの合計時間:650h
今日までに到達すべき目標時間:575h
目標との解離:75h
「10,000時間」まで、

残り・・・「9350時間!」