ReactでSPAを作り、Google認証(OAuth)でログインする。バックエンドはRails

2017年4月20日コメントはまだありません

はじめに

ReactでSPAを作ることになって、ログイン認証にメール＆パスワードの認証に加えて、
GoogleやTwitter認証も加えたくなった時、どうすればよいかわからなかった。
バックエンドはRailsだが、あくまでAPIサーバー的な立場なのでメジャーなomniauth
なんかは使えそうにない。。。
あれこれ悩みながらなんとか動くところまでたどり着いたので、やり方を公開。

React+Reduxの環境なんですが、そこまで立ち入ると話がややこしくなるので、
実装のエキス部分だけを記載してみます。

Google Developer Consoleにアプリ登録

Google Developers Console

これについては上記のURLにアクセスしてアプリを登録してください。
アプリ名とコールバックURLを登録したら、クライアントIDとクライアントシークレットがもらえます。
詳しくは書きません、ググればこれはたくさん書いてあります。

動作イメージ

デザインはしょぼいですが、こんな感じのログイン画面。
GoogleかTwitterで認証してログインしてね、というもの。
今回はGoogleについてのみ取り上げます。

Google+でログインをクリックすると、Googleが用意しているOAuth用の画面が表示されて、
Googleのユーザー名とパスワードを入れて、最後に今回作るアプリ（SPA）へのアクセス許可画面が表示され、
許可すると、SPAアプリにログイン出来るというもの。

ステップ１(Javascript)

まずはGoogleのOAuth画面の呼び出し。
Reactの書き方なので、functionらしくないですが・・・ただのfunctionだと思ってソースを見てください。

https://accounts.google.com/o/oauth2/auth に必要なパラメーターをざーっとつけて
window.openする感じです。
ポップアップというか別タブでGoogleのOAuth画面が開きます。
で、window.openしたあとは setTimeoutで1秒おきにウィンドウが閉じたかどうかをチェックします。

    onLoginGoogle: (history) => {
      const GOOGLE_CLIENT_ID = "52630050245845-i8xt563tc215pv9mxjy13e2ewm6mrewwl.apps.googleusercontent.com"
      let state_token = getRndStr()
      Cookies.set("mystate", state_token)


      let url = "https://accounts.google.com/o/oauth2/auth?"
      url += "client_id=" + GOOGLE_CLIENT_ID + "&"
      url += "response_type=code&"
      url += "scope=email%20profile&"
      url += "redirect_uri=http://localhost:3000/oauth_google&"
      url += "state=" + state_token


      windowLogin = window.open(url)
      setTimeout(function(){CheckLoginStatusGoogle(history)}, 1000)
      windowLogin.focus()
    },


    const getRndStr = () => {
       ランダムな文字列を生成するメソッドです。
    }

onLoginGoogle: (history) => {

const GOOGLE_CLIENT_ID = "52630050245845-i8xt563tc215pv9mxjy13e2ewm6mrewwl.apps.googleusercontent.com"

let state_token = getRndStr()

Cookies.set("mystate", state_token)

let url = "https://accounts.google.com/o/oauth2/auth?"

url += "client_id=" + GOOGLE_CLIENT_ID + "&"

url += "response_type=code&"

url += "scope=email%20profile&"

url += "redirect_uri=http://localhost:3000/oauth_google&"

url += "state=" + state_token

windowLogin = window.open(url)

setTimeout(function(){CheckLoginStatusGoogle(history)}, 1000)

windowLogin.focus()

const getRndStr = () => {

ランダムな文字列を生成するメソッドです。

}

ステップ２(Rails)

ステップ１でウィンドウを開くときのURLにコールバック用のURLを設定していますので、Google側の認証が終われば、
コールバックURL（自分で実装するアプリ）に制御が戻ってきます。
テスト環境ですのでRailsのデフォルト http://localhost:3000 でサーバーが立ち上がっていて、
コールバックURLは　http://localhost:3000/oauth_google　です。

では、Railsの方の実装を見てみましょう。
最初にステップ１でGoogleの認証画面を呼び出した時のステート（ランダム文字列）と
Googleさんが戻してきたステートが一致するか確認します。
OKならば、Developer Consoleで登録した、CLIENT_IDとCLIENT_SECRETを使い、
トークンを取得しに行きます。

最後に得られたトークンを使って、API呼び出しをしてGoogleに登録されている情報を読み出します。
で、cookiesに得られた情報をセットして、このメソッドを抜けます。

cookies[:google_code] = params[:code]
cookies[:email] = email
cookies[:google_uid] = api_result[“user_id”]

class OauthController < ApplicationController
  #URL /oauth_google への処理
  def google

    cookies[:google_code] = params[:code]

    if cookies[:mystate].present? && cookies[:mystate] == params[:state] &&
        params[:code].present?
      postData = {
        code: params[:code],
        client_id: Oauth::GOOGLE_CLIENT_ID,
        client_secret: Oauth::GOOGLE_CLIENT_SECRET,
        redirect_uri: "http://localhost:3000/oauth_google",
        grant_type: "authorization_code"
      }

      response = Net::HTTP::post_form(URI.parse("https://accounts.google.com/o/oauth2/token"),postData)
      result = JSON.parse(response.body)
      if result["expires_in"] > 0 && result["id_token"].present?

        api_response = Net::HTTP.get URI.parse("https://www.googleapis.com/oauth2/v1/tokeninfo?id_token=#{result['id_token']}")
        api_result = JSON.parse(api_response)


        if api_result["issuer"] == "accounts.google.com" &&
            api_result["issued_to"] == Oauth::GOOGLE_CLIENT_ID &&
            api_result["audience"] == Oauth::GOOGLE_CLIENT_ID &&
            api_result["email_verified"]


            email = api_result["email"]

            puts "Signin: success Google OAuth '#{email}' / #{api_result['user_id']}"
            cookies[:email] = email
            cookies[:google_uid] = api_result["user_id"]
        end

      end
    end

  end
end

class OauthController < ApplicationController

#URL /oauth_google への処理

def google

cookies[:google_code] = params[:code]

if cookies[:mystate].present? && cookies[:mystate] == params[:state] &&

params[:code].present?

postData = {

code: params[:code],

client_id: Oauth::GOOGLE_CLIENT_ID,

client_secret: Oauth::GOOGLE_CLIENT_SECRET,

redirect_uri: "http://localhost:3000/oauth_google",

grant_type: "authorization_code"

}

response = Net::HTTP::post_form(URI.parse("https://accounts.google.com/o/oauth2/token"),postData)

result = JSON.parse(response.body)

if result["expires_in"] > 0 && result["id_token"].present?

api_response = Net::HTTP.get URI.parse("https://www.googleapis.com/oauth2/v1/tokeninfo?id_token=#{result['id_token']}")

api_result = JSON.parse(api_response)

if api_result["issuer"] == "accounts.google.com" &&

api_result["issued_to"] == Oauth::GOOGLE_CLIENT_ID &&

api_result["audience"] == Oauth::GOOGLE_CLIENT_ID &&

api_result["email_verified"]

email = api_result["email"]

puts "Signin: success Google OAuth '#{email}' / #{api_result['user_id']}"

cookies[:email] = email

cookies[:google_uid] = api_result["user_id"]

end

ステップ３(RailsのJavascript)

OauthControllerのgoogleメソッドで処理をしたので、普通に処理が終われば、ポップアップ画面には
そのメソッドに対応するビューが表示されます。
なので、対応するビューは作るのですが、あくまでダミーで結構です。
そもそも、ポップアップ（別タブ）でGoogle認証が開いていて、認証が終わればポップアップは閉じてほしい
はずですので・・・

で、assets/javascripts 配下に以下のようなJavaScript（CoffeeScriptではない）を作ります。
ファイル名はなんでもいい。
で、ここでする処理は、ダミーのビューが表示された時にそのhrefをチェックして、
認証終了のダミービューだと判定できたら、window.closeしてやるというものです。

$(function(){
  if (window.location.href.indexOf("oauth_google") >0){
    window.close();
  }


});

$(function(){

if (window.location.href.indexOf("oauth_google") >0){

window.close();

}

});

ステップ４(SPAのJavascript)

最後にクライアントサイドです。window.openの時にsetTimeoutで呼ばれるメソッドです。
windowLogin.closedの状態を１秒間隔でチェックし、Googleの認証画面が閉じたら
alertに認証で得られた情報をクッキーから表示します。（別に表示する必要はないのですが・・・）
で、認証が通ったと判定できたら、アプリのトップページなどへジャンプしてやります。

あとはSPAなのでAPIサーバーへアクセスするたびにおそらくユーザー認証も必ずすることになると思うので、
APIを呼ぶたびに、ここで得られた情報を付与してやるイメージでしょうか・・・

本題とはそれますが、setTimeoutで引数をつけたfunctionを呼びたいときは無名関数とする
のがルールのようです。

const CheckLoginStatusGoogle = (history) => {
  if (windowLogin.closed) {
    alert(Cookies.get('mystate') + "\n" + Cookies.get('google_code') + "\n"
            + Cookies.get('email') + "\n" + Cookies.get('google_uid'))

    if (Cookies.get('google_code') != undefined && Cookies.get('email') != undefined){
      history.push("/counter")
    }
    else{
      alert("認証に失敗しました")
    }
  }
  else{
    setTimeout(function(){CheckLoginStatusGoogle(history)}, 1000)
  }
}

const CheckLoginStatusGoogle = (history) => {

if (windowLogin.closed) {

alert(Cookies.get('mystate') + "\n" + Cookies.get('google_code') + "\n"

+ Cookies.get('email') + "\n" + Cookies.get('google_uid'))

if (Cookies.get('google_code') != undefined && Cookies.get('email') != undefined){

history.push("/counter")

}

else{

alert("認証に失敗しました")

}

else{

setTimeout(function(){CheckLoginStatusGoogle(history)}, 1000)

}

あとがき

あっさりと説明しちゃいましたが、理屈がわかるまで結構時間がかかりました。
SPAでSNS認証するならどうすりゃいいんだという情報が、以外になくて・・・
あちこち読み漁って、なんとか形になりました。
何かの参考になればと・・・・

About the author:

hiro

Tags: OAuth rails reactjs

Linux Mint（Ubuntu）でイマドキの開発しよう！ 2017年夏版
2017年7月29日
フロントReactJS、バックエンドRailsという構成でサービス立ち上げに関わってた。思うんだけど、Macを開発に使うのはわかるんだけど、なぜWindows使う人がいるんだろ？どうせリリースするのLinuxベースのOSなんだし、フロントはiPhoneのSafariか AndroidのChrome、まぁあとはWindowsのChrome,Firefox,IE,Edge Macはほとんど使わないんでわからないんだけど、Windowsはほんともっさり動作だよね。これだけマシンのスペックがどんどん上がっているにもかかわらず、嫌がらせのように動きがトロい。コンソールでコマンドライン叩くのがほ…
dockerを使って RailsとReact(node)の開発環境を構築する
2017年4月29日
はじめに dockerを使って、Rails（サーバーサイド）の環境を１つ、React(node)（クライアントサイド）の環境を１つ作る。両環境ではChromeとAtomが動かせて、開発できるようになるところまでが目標です。 docker 自体触るのが初めてだったので、基本的なことから記載しておきます。加えて初心者なので、間違えがあったらごめんなさい。 docker自体のインストールはあちこちに記載されているので、そちらを参照ください。 docker イメージのダウンロードまず、ubuntuのイメージを検索します。スター(STARS)が多い、イメージをダウンロード（PULL)すればOKで…
Webpackを使って、Sassをコンパイルする方法 2017年4月版
2017年4月28日
はじめに Webpackを使って、Sassをコンパイルする方法です。 Webにそれなりにやり方が載ってますが、2017年4月末現在では、動く例が少なかったので、実際に動いた例を示しておきます。末尾にReactなんかの開発で ES6をノーマルなJavascriptに変換するときとの合わせ技の方法も記載しておきます。コンパイル環境構築

Shell

$ mkdir test-saas $ cd test-saas $ npm init -y $ npm install webpack extract-text-webpack-plugin css-loader sass-loader style-loader node-sass --save-dev

1
2
3
4

$ mkdir test-saas
$ cd test-saas
$ npm init -y
$ npm install webpack extract-text-webpack-plugin css-loader sass-loader style-loader node-sass --save-dev

こんな感じのフォルダツリーにsassがあると仮定します。 webpack.configの調整ルートフォルダに webpack.config.jsを以下のような内容で作成します。目標は sas…
React Native デバイスの縦向き(PORTRAIT)、横向き(LANDSCAPE)の変化を捉える（イベント）
2017年4月26日
はじめに React Nativeを初めて１０日ほどが立ちました。画面デザインが難しいですね。 flex layoutを使うと、それなりの画面は出来ますが・・・ヘッダー(Navigation)とフッター(Menu or Tab)のサイズが曖昧になり、時には隠れてしまうケースもあります。で、どうすりゃいいんだと考えて、今、思いついたのは、 flex layoutを諦めて、固定ピッチで画面デザインをしてやること。固定ピッチと言っても、デバイスの画面サイズを判定して、ヘッダーはこの高さ、メインのコンテンツはこの高さ、フッターはこの高さというのを計算で求めてやるのが、一番スマートかなとい…
Reactで react-dropzone と axiosを使ってファイルアップロードを実装してみる（バックエンドはRails）
2017年4月24日
はじめに Reactでファイルアップロードを実装してみたくて、どのような方法があるのか調べてみた。あまり深く調べてはないが、１つめに良さそうだと感じた react-dropzone を使ってみたら、これがかなりいい！！あまりに気に入ってしまったので、react-dropzoneでアップロード対象のファイルを選んで、 axiosでPOSTして、サーバーサイドのRailsでファイルを保存するところまでをざっと紹介します。 Reactのことは分かっている前提ですすめますので、あしからず。出来上がりのイメージはこんな感じ画面左上にファイルをドロップする場所があり、その右側にドロップされたフ…
ReactでSPAを作り、Twitter認証(OAuth)でログインする。バックエンドはRails
2017年4月21日
はじめに ReactでSPAを作ることになって、ログイン認証にメール＆パスワードの認証に加えて、 GoogleやTwitter認証も加えたくなった時、どうすればよいかわからなかった。バックエンドはRailsだが、あくまでAPIサーバー的な立場なのでメジャーなomniauth なんかは使えそうにない。。。前回のGoogle編に続き、今回はTwitter編。あれこれ悩みながらなんとか動くところまでたどり着いたので、やり方を公開。 React+Reduxの環境なんですが、そこまで立ち入ると話がややこしくなるので、実装のエキス部分だけを記載してみます。 Twitter Developerにア…
React-Router(react-router-dom)とReduxとRailsを組み合わせる
2017年4月14日
はじめに React+Redux+RailsでSPAアプリを作ることになったので、あれこれ調べたのでメモです。 SPAというと、当然ですが、１つのページであれこれできちゃうものを作らなきゃいけないわけで・・・そうなるとコンテンツ制御の仕組みが必要です。そこで登場するのがReact-Router-Dom。で、これ単体では使い方簡単なんですが、RailsとReduxを絡めて動作させる方法が分からなかったのであれこれ調べて、なんとか動くところまでたどり着いたので、メモを公開します。 React-Routerは古いようで、React-Router-Domにしてみました。。ドキュメントが超少なく…
React、Redux入門公式サイトとはちょっと違う角度から
2017年4月13日
はじめにここ3週間ほど死ぬほどReactとReduxやって、あれこれ分かるようになったので、これからReact+Reduxで開発を始めたい人向けに記事を書いてみます。公式サイトの英語記事や、それを翻訳してくれているようなサイトを見てもそれなりに分かるのですが・・・なんだかんだ言って難しい。 Reactの理解はなんとか出来ても、Reduxが特に難しい。欲張りなんですが、とにかく両方をサーッと理解して、さっさとアプリ組みたいよという方の助けになれればと・・・考えていく手順画面イメージ画面を構築するためのコンポーネント階層図ステートイベント基本的にこの４つを考えればOKです。既…

< >