{"id":1608,"date":"2017-04-20T22:27:09","date_gmt":"2017-04-20T13:27:09","guid":{"rendered":"http:\/\/lovelinux.mydns.jp\/?p=1608"},"modified":"2018-04-23T16:17:30","modified_gmt":"2018-04-23T07:17:30","slug":"react%e3%81%a7spa%e3%82%92%e4%bd%9c%e3%82%8a%e3%80%81google%e8%aa%8d%e8%a8%bcoauth%e3%81%a7%e3%83%ad%e3%82%b0%e3%82%a4%e3%83%b3%e3%81%99%e3%82%8b%e3%80%82%e3%83%90%e3%83%83%e3%82%af%e3%82%a8","status":"publish","type":"post","link":"https:\/\/lovelinux.mydns.jp\/?p=1608","title":{"rendered":"React\u3067SPA\u3092\u4f5c\u308a\u3001Google\u8a8d\u8a3c(OAuth)\u3067\u30ed\u30b0\u30a4\u30f3\u3059\u308b\u3002\u30d0\u30c3\u30af\u30a8\u30f3\u30c9\u306fRails"},"content":{"rendered":"

\u306f\u3058\u3081\u306b<\/h3>\n

React\u3067SPA\u3092\u4f5c\u308b\u3053\u3068\u306b\u306a\u3063\u3066\u3001\u30ed\u30b0\u30a4\u30f3\u8a8d\u8a3c\u306b\u30e1\u30fc\u30eb\uff06\u30d1\u30b9\u30ef\u30fc\u30c9\u306e\u8a8d\u8a3c\u306b\u52a0\u3048\u3066\u3001
\nGoogle\u3084Twitter\u8a8d\u8a3c\u3082\u52a0\u3048\u305f\u304f\u306a\u3063\u305f\u6642\u3001\u3069\u3046\u3059\u308c\u3070\u3088\u3044\u304b\u308f\u304b\u3089\u306a\u304b\u3063\u305f\u3002
\n\u30d0\u30c3\u30af\u30a8\u30f3\u30c9\u306fRails\u3060\u304c\u3001\u3042\u304f\u307e\u3067API\u30b5\u30fc\u30d0\u30fc\u7684\u306a\u7acb\u5834\u306a\u306e\u3067 \u30e1\u30b8\u30e3\u30fc\u306aomniauth
\n\u306a\u3093\u304b\u306f\u4f7f\u3048\u305d\u3046\u306b\u306a\u3044\u3002\u3002\u3002
\n\u3042\u308c\u3053\u308c\u60a9\u307f\u306a\u304c\u3089\u306a\u3093\u3068\u304b\u52d5\u304f\u3068\u3053\u308d\u307e\u3067\u305f\u3069\u308a\u7740\u3044\u305f\u306e\u3067\u3001\u3084\u308a\u65b9\u3092\u516c\u958b\u3002<\/p>\n

React+Redux\u306e\u74b0\u5883\u306a\u3093\u3067\u3059\u304c\u3001\u305d\u3053\u307e\u3067\u7acb\u3061\u5165\u308b\u3068\u8a71\u304c\u3084\u3084\u3053\u3057\u304f\u306a\u308b\u306e\u3067\u3001
\n\u5b9f\u88c5\u306e\u30a8\u30ad\u30b9\u90e8\u5206\u3060\u3051\u3092\u8a18\u8f09\u3057\u3066\u307f\u307e\u3059\u3002<\/p>\n

Google Developer Console\u306b\u30a2\u30d7\u30ea\u767b\u9332<\/h3>\n

Google Developers Console<\/a><\/p>\n

\u3053\u308c\u306b\u3064\u3044\u3066\u306f\u4e0a\u8a18\u306eURL\u306b\u30a2\u30af\u30bb\u30b9\u3057\u3066\u30a2\u30d7\u30ea\u3092\u767b\u9332\u3057\u3066\u304f\u3060\u3055\u3044\u3002
\n\u30a2\u30d7\u30ea\u540d\u3068\u30b3\u30fc\u30eb\u30d0\u30c3\u30afURL\u3092\u767b\u9332\u3057\u305f\u3089\u3001\u30af\u30e9\u30a4\u30a2\u30f3\u30c8ID\u3068\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u30b7\u30fc\u30af\u30ec\u30c3\u30c8\u304c\u3082\u3089\u3048\u307e\u3059\u3002
\n\u8a73\u3057\u304f\u306f\u66f8\u304d\u307e\u305b\u3093\u3001\u30b0\u30b0\u308c\u3070\u3053\u308c\u306f\u305f\u304f\u3055\u3093\u66f8\u3044\u3066\u3042\u308a\u307e\u3059\u3002<\/p>\n

\"oauth-7\"<\/a><\/p>\n

\u52d5\u4f5c\u30a4\u30e1\u30fc\u30b8<\/h3>\n

\u30c7\u30b6\u30a4\u30f3\u306f\u3057\u3087\u307c\u3044\u3067\u3059\u304c\u3001\u3053\u3093\u306a\u611f\u3058\u306e\u30ed\u30b0\u30a4\u30f3\u753b\u9762\u3002
\nGoogle\u304bTwitter\u3067\u8a8d\u8a3c\u3057\u3066\u30ed\u30b0\u30a4\u30f3\u3057\u3066\u306d\u3001\u3068\u3044\u3046\u3082\u306e\u3002
\n\u4eca\u56de\u306fGoogle\u306b\u3064\u3044\u3066\u306e\u307f\u53d6\u308a\u4e0a\u3052\u307e\u3059\u3002<\/p>\n

Google+\u3067\u30ed\u30b0\u30a4\u30f3\u3092\u30af\u30ea\u30c3\u30af\u3059\u308b\u3068\u3001Google\u304c\u7528\u610f\u3057\u3066\u3044\u308bOAuth\u7528\u306e\u753b\u9762\u304c\u8868\u793a\u3055\u308c\u3066\u3001
\nGoogle\u306e\u30e6\u30fc\u30b6\u30fc\u540d\u3068\u30d1\u30b9\u30ef\u30fc\u30c9\u3092\u5165\u308c\u3066\u3001\u6700\u5f8c\u306b\u4eca\u56de\u4f5c\u308b\u30a2\u30d7\u30ea\uff08SPA\uff09\u3078\u306e\u30a2\u30af\u30bb\u30b9\u8a31\u53ef\u753b\u9762\u304c\u8868\u793a\u3055\u308c\u3001
\n\u8a31\u53ef\u3059\u308b\u3068\u3001SPA\u30a2\u30d7\u30ea\u306b\u30ed\u30b0\u30a4\u30f3\u51fa\u6765\u308b\u3068\u3044\u3046\u3082\u306e\u3002<\/p>\n

\"oauth-1\"<\/a><\/p>\n

\"oauth-2\"<\/a><\/p>\n

\"oauth-3\"<\/a><\/p>\n

\"oauth-4\"<\/a><\/p>\n

\"oauth-5\"<\/a><\/p>\n

\u30b9\u30c6\u30c3\u30d7\uff11(Javascript)<\/h3>\n

\u307e\u305a\u306fGoogle\u306eOAuth\u753b\u9762\u306e\u547c\u3073\u51fa\u3057\u3002
\nReact\u306e\u66f8\u304d\u65b9\u306a\u306e\u3067\u3001function\u3089\u3057\u304f\u306a\u3044\u3067\u3059\u304c\u30fb\u30fb\u30fb\u305f\u3060\u306efunction\u3060\u3068\u601d\u3063\u3066\u30bd\u30fc\u30b9\u3092\u898b\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n

https:\/\/accounts.google.com\/o\/oauth2\/auth \u306b\u5fc5\u8981\u306a\u30d1\u30e9\u30e1\u30fc\u30bf\u30fc\u3092\u3056\u30fc\u3063\u3068\u3064\u3051\u3066
\nwindow.open\u3059\u308b\u611f\u3058\u3067\u3059\u3002
\n\u30dd\u30c3\u30d7\u30a2\u30c3\u30d7\u3068\u3044\u3046\u304b\u5225\u30bf\u30d6\u3067Google\u306eOAuth\u753b\u9762\u304c\u958b\u304d\u307e\u3059\u3002
\n\u3067\u3001window.open\u3057\u305f\u3042\u3068\u306f setTimeout\u30671\u79d2\u304a\u304d\u306b\u30a6\u30a3\u30f3\u30c9\u30a6\u304c\u9589\u3058\u305f\u304b\u3069\u3046\u304b\u3092\u30c1\u30a7\u30c3\u30af\u3057\u307e\u3059\u3002<\/p>\n

[bash]
\n onLoginGoogle: (history) => {
\n const GOOGLE_CLIENT_ID = “52630050245845-i8xt563tc215pv9mxjy13e2ewm6mrewwl.apps.googleusercontent.com”
\n let state_token = getRndStr()
\n Cookies.set(“mystate”, state_token)<\/p>\n

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

windowLogin = window.open(url)
\n setTimeout(function(){CheckLoginStatusGoogle(history)}, 1000)
\n windowLogin.focus()
\n },<\/p>\n

const getRndStr = () => {
\n \u30e9\u30f3\u30c0\u30e0\u306a\u6587\u5b57\u5217\u3092\u751f\u6210\u3059\u308b\u30e1\u30bd\u30c3\u30c9\u3067\u3059\u3002
\n }<\/p>\n

[\/bash]<\/p>\n

\u30b9\u30c6\u30c3\u30d7\uff12(Rails)<\/h3>\n

\u30b9\u30c6\u30c3\u30d7\uff11\u3067\u30a6\u30a3\u30f3\u30c9\u30a6\u3092\u958b\u304f\u3068\u304d\u306eURL\u306b\u30b3\u30fc\u30eb\u30d0\u30c3\u30af\u7528\u306eURL\u3092\u8a2d\u5b9a\u3057\u3066\u3044\u307e\u3059\u306e\u3067\u3001Google\u5074\u306e\u8a8d\u8a3c\u304c\u7d42\u308f\u308c\u3070\u3001
\n\u30b3\u30fc\u30eb\u30d0\u30c3\u30afURL\uff08\u81ea\u5206\u3067\u5b9f\u88c5\u3059\u308b\u30a2\u30d7\u30ea\uff09\u306b\u5236\u5fa1\u304c\u623b\u3063\u3066\u304d\u307e\u3059\u3002
\n\u30c6\u30b9\u30c8\u74b0\u5883\u3067\u3059\u306e\u3067Rails\u306e\u30c7\u30d5\u30a9\u30eb\u30c8 http:\/\/localhost:3000 \u3067\u30b5\u30fc\u30d0\u30fc\u304c\u7acb\u3061\u4e0a\u304c\u3063\u3066\u3044\u3066\u3001
\n\u30b3\u30fc\u30eb\u30d0\u30c3\u30afURL\u306f\u3000http:\/\/localhost:3000\/oauth_google\u3000\u3067\u3059\u3002<\/p>\n

\u3067\u306f\u3001Rails\u306e\u65b9\u306e\u5b9f\u88c5\u3092\u898b\u3066\u307f\u307e\u3057\u3087\u3046\u3002
\n\u6700\u521d\u306b\u30b9\u30c6\u30c3\u30d7\uff11\u3067Google\u306e\u8a8d\u8a3c\u753b\u9762\u3092\u547c\u3073\u51fa\u3057\u305f\u6642\u306e\u30b9\u30c6\u30fc\u30c8\uff08\u30e9\u30f3\u30c0\u30e0\u6587\u5b57\u5217\uff09\u3068
\nGoogle\u3055\u3093\u304c\u623b\u3057\u3066\u304d\u305f\u30b9\u30c6\u30fc\u30c8\u304c\u4e00\u81f4\u3059\u308b\u304b\u78ba\u8a8d\u3057\u307e\u3059\u3002
\nOK\u306a\u3089\u3070\u3001Developer Console\u3067\u767b\u9332\u3057\u305f\u3001CLIENT_ID\u3068CLIENT_SECRET\u3092\u4f7f\u3044\u3001
\n\u30c8\u30fc\u30af\u30f3\u3092\u53d6\u5f97\u3057\u306b\u884c\u304d\u307e\u3059\u3002<\/p>\n

\u6700\u5f8c\u306b\u5f97\u3089\u308c\u305f\u30c8\u30fc\u30af\u30f3\u3092\u4f7f\u3063\u3066\u3001API\u547c\u3073\u51fa\u3057\u3092\u3057\u3066Google\u306b\u767b\u9332\u3055\u308c\u3066\u3044\u308b\u60c5\u5831\u3092\u8aad\u307f\u51fa\u3057\u307e\u3059\u3002
\n\u3067\u3001cookies\u306b\u5f97\u3089\u308c\u305f\u60c5\u5831\u3092\u30bb\u30c3\u30c8\u3057\u3066\u3001\u3053\u306e\u30e1\u30bd\u30c3\u30c9\u3092\u629c\u3051\u307e\u3059\u3002<\/p>\n

cookies[:google_code] = params[:code]
\ncookies[:email] = email
\ncookies[:google_uid] = api_result[“user_id”]<\/p>\n

[bash]
\nclass OauthController < ApplicationController\n #URL \/oauth_google \u3078\u306e\u51e6\u7406\n def google\n\n cookies[:google_code] = params[:code]\n\n if cookies[:mystate].present? && cookies[:mystate] == params[:state] &&\n params[:code].present?\n postData = {\n code: params[:code],\n client_id: Oauth::GOOGLE_CLIENT_ID,\n client_secret: Oauth::GOOGLE_CLIENT_SECRET,\n redirect_uri: \"http:\/\/localhost:3000\/oauth_google\",\n grant_type: \"authorization_code\"\n }\n\n response = Net::HTTP::post_form(URI.parse(\"https:\/\/accounts.google.com\/o\/oauth2\/token\"),postData)\n result = JSON.parse(response.body)\n if result[\"expires_in\"] > 0 && result[“id_token”].present?<\/p>\n

api_response = Net::HTTP.get URI.parse(“https:\/\/www.googleapis.com\/oauth2\/v1\/tokeninfo?id_token=#{result[‘id_token’]}”)
\n api_result = JSON.parse(api_response)<\/p>\n

if api_result[“issuer”] == “accounts.google.com” &&
\n api_result[“issued_to”] == Oauth::GOOGLE_CLIENT_ID &&
\n api_result[“audience”] == Oauth::GOOGLE_CLIENT_ID &&
\n api_result[“email_verified”]<\/p>\n

email = api_result[“email”]<\/p>\n

puts “Signin: success Google OAuth ‘#{email}’ \/ #{api_result[‘user_id’]}”
\n cookies[:email] = email
\n cookies[:google_uid] = api_result[“user_id”]
\n end<\/p>\n

end
\n end<\/p>\n

end
\nend<\/p>\n

[\/bash]<\/p>\n

\u30b9\u30c6\u30c3\u30d7\uff13(Rails\u306eJavascript)<\/h3>\n

OauthController\u306egoogle\u30e1\u30bd\u30c3\u30c9\u3067\u51e6\u7406\u3092\u3057\u305f\u306e\u3067\u3001\u666e\u901a\u306b\u51e6\u7406\u304c\u7d42\u308f\u308c\u3070\u3001\u30dd\u30c3\u30d7\u30a2\u30c3\u30d7\u753b\u9762\u306b\u306f
\n\u305d\u306e\u30e1\u30bd\u30c3\u30c9\u306b\u5bfe\u5fdc\u3059\u308b\u30d3\u30e5\u30fc\u304c\u8868\u793a\u3055\u308c\u307e\u3059\u3002
\n\u306a\u306e\u3067\u3001\u5bfe\u5fdc\u3059\u308b\u30d3\u30e5\u30fc\u306f\u4f5c\u308b\u306e\u3067\u3059\u304c\u3001\u3042\u304f\u307e\u3067\u30c0\u30df\u30fc\u3067\u7d50\u69cb\u3067\u3059\u3002
\n\u305d\u3082\u305d\u3082\u3001\u30dd\u30c3\u30d7\u30a2\u30c3\u30d7\uff08\u5225\u30bf\u30d6\uff09\u3067Google\u8a8d\u8a3c\u304c\u958b\u3044\u3066\u3044\u3066\u3001\u8a8d\u8a3c\u304c\u7d42\u308f\u308c\u3070\u30dd\u30c3\u30d7\u30a2\u30c3\u30d7\u306f\u9589\u3058\u3066\u307b\u3057\u3044
\n\u306f\u305a\u3067\u3059\u306e\u3067\u30fb\u30fb\u30fb<\/p>\n

\u3067\u3001assets\/javascripts \u914d\u4e0b\u306b\u4ee5\u4e0b\u306e\u3088\u3046\u306aJavaScript\uff08CoffeeScript\u3067\u306f\u306a\u3044\uff09\u3092\u4f5c\u308a\u307e\u3059\u3002
\n\u30d5\u30a1\u30a4\u30eb\u540d\u306f\u306a\u3093\u3067\u3082\u3044\u3044\u3002
\n\u3067\u3001\u3053\u3053\u3067\u3059\u308b\u51e6\u7406\u306f\u3001\u30c0\u30df\u30fc\u306e\u30d3\u30e5\u30fc\u304c\u8868\u793a\u3055\u308c\u305f\u6642\u306b\u305d\u306ehref\u3092\u30c1\u30a7\u30c3\u30af\u3057\u3066\u3001
\n\u8a8d\u8a3c\u7d42\u4e86\u306e\u30c0\u30df\u30fc\u30d3\u30e5\u30fc\u3060\u3068\u5224\u5b9a\u3067\u304d\u305f\u3089\u3001window.close\u3057\u3066\u3084\u308b\u3068\u3044\u3046\u3082\u306e\u3067\u3059\u3002<\/p>\n

[bash]
\n$(function(){
\n if (window.location.href.indexOf(“oauth_google”) >0){
\n window.close();
\n }<\/p>\n

});<\/p>\n

[\/bash]<\/p>\n

\u30b9\u30c6\u30c3\u30d7\uff14(SPA\u306eJavascript)<\/h3>\n

\u6700\u5f8c\u306b\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u30b5\u30a4\u30c9\u3067\u3059\u3002window.open\u306e\u6642\u306bsetTimeout\u3067\u547c\u3070\u308c\u308b\u30e1\u30bd\u30c3\u30c9\u3067\u3059\u3002
\nwindowLogin.closed\u306e\u72b6\u614b\u3092\uff11\u79d2\u9593\u9694\u3067\u30c1\u30a7\u30c3\u30af\u3057\u3001Google\u306e\u8a8d\u8a3c\u753b\u9762\u304c\u9589\u3058\u305f\u3089
\nalert\u306b\u8a8d\u8a3c\u3067\u5f97\u3089\u308c\u305f\u60c5\u5831\u3092\u30af\u30c3\u30ad\u30fc\u304b\u3089\u8868\u793a\u3057\u307e\u3059\u3002\uff08\u5225\u306b\u8868\u793a\u3059\u308b\u5fc5\u8981\u306f\u306a\u3044\u306e\u3067\u3059\u304c\u30fb\u30fb\u30fb\uff09
\n\u3067\u3001\u8a8d\u8a3c\u304c\u901a\u3063\u305f\u3068\u5224\u5b9a\u3067\u304d\u305f\u3089\u3001\u30a2\u30d7\u30ea\u306e\u30c8\u30c3\u30d7\u30da\u30fc\u30b8\u306a\u3069\u3078\u30b8\u30e3\u30f3\u30d7\u3057\u3066\u3084\u308a\u307e\u3059\u3002<\/p>\n

\u3042\u3068\u306fSPA\u306a\u306e\u3067API\u30b5\u30fc\u30d0\u30fc\u3078\u30a2\u30af\u30bb\u30b9\u3059\u308b\u305f\u3073\u306b\u304a\u305d\u3089\u304f\u30e6\u30fc\u30b6\u30fc\u8a8d\u8a3c\u3082\u5fc5\u305a\u3059\u308b\u3053\u3068\u306b\u306a\u308b\u3068\u601d\u3046\u306e\u3067\u3001
\nAPI\u3092\u547c\u3076\u305f\u3073\u306b\u3001\u3053\u3053\u3067\u5f97\u3089\u308c\u305f\u60c5\u5831\u3092\u4ed8\u4e0e\u3057\u3066\u3084\u308b\u30a4\u30e1\u30fc\u30b8\u3067\u3057\u3087\u3046\u304b\u30fb\u30fb\u30fb<\/p>\n

\u672c\u984c\u3068\u306f\u305d\u308c\u307e\u3059\u304c\u3001setTimeout\u3067\u5f15\u6570\u3092\u3064\u3051\u305ffunction\u3092\u547c\u3073\u305f\u3044\u3068\u304d\u306f \u7121\u540d\u95a2\u6570\u3068\u3059\u308b
\n\u306e\u304c\u30eb\u30fc\u30eb\u306e\u3088\u3046\u3067\u3059\u3002<\/p>\n

[bash]
\nconst CheckLoginStatusGoogle = (history) => {
\n if (windowLogin.closed) {
\n alert(Cookies.get(‘mystate’) + “\\n” + Cookies.get(‘google_code’) + “\\n”
\n + Cookies.get(’email’) + “\\n” + Cookies.get(‘google_uid’))<\/p>\n

if (Cookies.get(‘google_code’) != undefined && Cookies.get(’email’) != undefined){
\n history.push(“\/counter”)
\n }
\n else{
\n alert(“\u8a8d\u8a3c\u306b\u5931\u6557\u3057\u307e\u3057\u305f”)
\n }
\n }
\n else{
\n setTimeout(function(){CheckLoginStatusGoogle(history)}, 1000)
\n }
\n}
\n[\/bash]<\/p>\n

\"oauth-6\"<\/a><\/p>\n

\u3042\u3068\u304c\u304d<\/h3>\n

\u3042\u3063\u3055\u308a\u3068\u8aac\u660e\u3057\u3061\u3083\u3044\u307e\u3057\u305f\u304c\u3001\u7406\u5c48\u304c\u308f\u304b\u308b\u307e\u3067\u7d50\u69cb\u6642\u9593\u304c\u304b\u304b\u308a\u307e\u3057\u305f\u3002
\nSPA\u3067SNS\u8a8d\u8a3c\u3059\u308b\u306a\u3089\u3069\u3046\u3059\u308a\u3083\u3044\u3044\u3093\u3060\u3068\u3044\u3046\u60c5\u5831\u304c\u3001\u4ee5\u5916\u306b\u306a\u304f\u3066\u30fb\u30fb\u30fb
\n\u3042\u3061\u3053\u3061\u8aad\u307f\u6f01\u3063\u3066\u3001\u306a\u3093\u3068\u304b\u5f62\u306b\u306a\u308a\u307e\u3057\u305f\u3002
\n\u4f55\u304b\u306e\u53c2\u8003\u306b\u306a\u308c\u3070\u3068\u30fb\u30fb\u30fb\u30fb<\/p>\n","protected":false},"excerpt":{"rendered":"

\u306f\u3058\u3081\u306b React\u3067SPA\u3092\u4f5c\u308b\u3053\u3068\u306b\u306a\u3063\u3066\u3001\u30ed\u30b0\u30a4\u30f3\u8a8d\u8a3c\u306b\u30e1\u30fc\u30eb\uff06\u30d1\u30b9\u30ef\u30fc\u30c9\u306e\u8a8d\u8a3c\u306b\u52a0\u3048\u3066\u3001 Google\u3084Twitter\u8a8d\u8a3c\u3082\u52a0\u3048\u305f\u304f\u306a\u3063\u305f\u6642\u3001\u3069\u3046\u3059\u308c\u3070\u3088\u3044\u304b\u308f\u304b\u3089\u306a\u304b\u3063\u305f\u3002 \u30d0\u30c3\u30af\u30a8\u30f3\u30c9\u306fRails\u3060\u304c\u3001\u3042\u304f\u307e\u3067API\u30b5\u30fc\u30d0\u30fc\u7684\u306a\u7acb\u5834\u306a\u306e\u3067 \u30e1\u30b8\u30e3\u30fc\u306aomniauth \u306a\u3093\u304b\u306f\u4f7f\u3048\u305d\u3046\u306b\u306a\u3044\u3002\u3002\u3002 \u3042\u308c\u3053\u308c\u60a9\u307f\u306a\u304c\u3089\u306a\u3093\u3068\u304b\u52d5\u304f\u3068\u3053\u308d\u307e\u3067\u305f\u3069\u308a\u7740\u3044\u305f\u306e\u3067\u3001\u3084\u308a\u65b9\u3092\u516c\u958b\u3002 React+Redux\u306e\u74b0\u5883\u306a\u3093\u3067\u3059\u304c\u3001\u305d\u3053\u307e\u3067\u7acb\u3061\u5165\u308b\u3068\u8a71\u304c\u3084\u3084\u3053\u3057\u304f\u306a\u308b\u306e\u3067\u3001 \u5b9f\u88c5\u306e\u30a8\u30ad\u30b9\u90e8\u5206\u3060\u3051\u3092\u8a18\u8f09\u3057\u3066\u307f\u307e\u3059\u3002 Google Developer Console\u306b\u30a2\u30d7\u30ea\u767b\u9332 Google Developers Console \u3053\u308c\u306b\u3064\u3044\u3066\u306f\u4e0a\u8a18\u306eURL\u306b\u30a2\u30af\u30bb\u30b9\u3057\u3066\u30a2\u30d7\u30ea\u3092\u767b\u9332\u3057\u3066\u304f\u3060\u3055\u3044\u3002 \u30a2\u30d7\u30ea\u540d\u3068\u30b3\u30fc\u30eb\u30d0\u30c3\u30afURL\u3092\u767b\u9332\u3057\u305f\u3089\u3001\u30af\u30e9\u30a4\u30a2\u30f3\u30c8ID\u3068\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u30b7\u30fc\u30af\u30ec\u30c3\u30c8\u304c\u3082\u3089\u3048\u307e\u3059\u3002 \u8a73\u3057\u304f\u306f\u66f8\u304d\u307e\u305b\u3093\u3001\u30b0\u30b0\u308c\u3070\u3053\u308c\u306f\u305f\u304f\u3055\u3093\u66f8\u3044\u3066\u3042\u308a\u307e\u3059\u3002 \u52d5\u4f5c\u30a4\u30e1\u30fc\u30b8 \u30c7\u30b6\u30a4\u30f3\u306f\u3057\u3087\u307c\u3044\u3067\u3059\u304c\u3001\u3053\u3093\u306a\u611f\u3058\u306e\u30ed\u30b0\u30a4\u30f3\u753b\u9762\u3002 Google\u304bTwitter\u3067\u8a8d\u8a3c\u3057\u3066\u30ed\u30b0\u30a4\u30f3\u3057\u3066\u306d\u3001\u3068\u3044\u3046\u3082\u306e\u3002 \u4eca\u56de\u306fGoogle\u306b\u3064\u3044\u3066\u306e\u307f\u53d6\u308a\u4e0a\u3052\u307e\u3059\u3002 Google+\u3067\u30ed\u30b0\u30a4\u30f3\u3092\u30af\u30ea\u30c3\u30af\u3059\u308b\u3068\u3001Google\u304c\u7528\u610f\u3057\u3066\u3044\u308bOAuth\u7528\u306e\u753b\u9762\u304c\u8868\u793a\u3055\u308c\u3066\u3001 Google\u306e\u30e6\u30fc\u30b6\u30fc\u540d\u3068\u30d1\u30b9\u30ef\u30fc\u30c9\u3092\u5165\u308c\u3066\u3001\u6700\u5f8c\u306b\u4eca\u56de\u4f5c\u308b\u30a2\u30d7\u30ea\uff08SPA\uff09\u3078\u306e\u30a2\u30af\u30bb\u30b9\u8a31\u53ef\u753b\u9762\u304c\u8868\u793a\u3055\u308c\u3001 \u8a31\u53ef\u3059\u308b\u3068\u3001SPA\u30a2\u30d7\u30ea\u306b\u30ed\u30b0\u30a4\u30f3\u51fa\u6765\u308b\u3068\u3044\u3046\u3082\u306e\u3002 \u30b9\u30c6\u30c3\u30d7\uff11(Javascript) \u307e\u305a\u306fGoogle\u306eOAuth\u753b\u9762\u306e\u547c\u3073\u51fa\u3057\u3002 React\u306e\u66f8\u304d\u65b9\u306a\u306e\u3067\u3001function\u3089\u3057\u304f\u306a\u3044\u3067\u3059\u304c\u30fb\u30fb\u30fb\u305f\u3060\u306efunction\u3060\u3068\u601d\u3063\u3066\u30bd\u30fc\u30b9\u3092\u898b\u3066\u304f\u3060\u3055\u3044\u3002 https:\/\/accounts.google.com\/o\/oauth2\/auth \u306b\u5fc5\u8981\u306a\u30d1\u30e9\u30e1\u30fc\u30bf\u30fc\u3092\u3056\u30fc\u3063\u3068\u3064\u3051\u3066 window.open\u3059\u308b\u611f\u3058\u3067\u3059\u3002 \u30dd\u30c3\u30d7\u30a2\u30c3\u30d7\u3068\u3044\u3046\u304b\u5225\u30bf\u30d6\u3067Google\u306eOAuth\u753b\u9762\u304c\u958b\u304d\u307e\u3059\u3002 \u3067\u3001window.open\u3057\u305f\u3042\u3068\u306f setTimeout\u30671\u79d2\u304a\u304d\u306b\u30a6\u30a3\u30f3\u30c9\u30a6\u304c\u9589\u3058\u305f\u304b\u3069\u3046\u304b\u3092\u30c1\u30a7\u30c3\u30af\u3057\u307e\u3059\u3002 [bash] 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 = () => { \u30e9\u30f3\u30c0\u30e0\u306a\u6587\u5b57\u5217\u3092\u751f\u6210\u3059\u308b\u30e1\u30bd\u30c3\u30c9\u3067\u3059\u3002 } [\/bash] \u30b9\u30c6\u30c3\u30d7\uff12(Rails) \u30b9\u30c6\u30c3\u30d7\uff11\u3067\u30a6\u30a3\u30f3\u30c9\u30a6\u3092\u958b\u304f\u3068\u304d\u306eURL\u306b\u30b3\u30fc\u30eb\u30d0\u30c3\u30af\u7528\u306eURL\u3092\u8a2d\u5b9a\u3057\u3066\u3044\u307e\u3059\u306e\u3067\u3001Google\u5074\u306e\u8a8d\u8a3c\u304c\u7d42\u308f\u308c\u3070\u3001 \u30b3\u30fc\u30eb\u30d0\u30c3\u30afURL\uff08\u81ea\u5206\u3067\u5b9f\u88c5\u3059\u308b\u30a2\u30d7\u30ea\uff09\u306b\u5236\u5fa1\u304c\u623b\u3063\u3066\u304d\u307e\u3059\u3002 \u30c6\u30b9\u30c8\u74b0\u5883\u3067\u3059\u306e\u3067Rails\u306e\u30c7\u30d5\u30a9\u30eb\u30c8 http:\/\/localhost:3000 \u3067\u30b5\u30fc\u30d0\u30fc\u304c\u7acb\u3061\u4e0a\u304c\u3063\u3066\u3044\u3066\u3001 \u30b3\u30fc\u30eb\u30d0\u30c3\u30afURL\u306f\u3000http:\/\/localhost:3000\/oauth_google\u3000\u3067\u3059\u3002 \u3067\u306f\u3001Rails\u306e\u65b9\u306e\u5b9f\u88c5\u3092\u898b\u3066\u307f\u307e\u3057\u3087\u3046\u3002 \u6700\u521d\u306b\u30b9\u30c6\u30c3\u30d7\uff11\u3067Google\u306e\u8a8d\u8a3c\u753b\u9762\u3092\u547c\u3073\u51fa\u3057\u305f\u6642\u306e\u30b9\u30c6\u30fc\u30c8\uff08\u30e9\u30f3\u30c0\u30e0\u6587\u5b57\u5217\uff09\u3068 Google\u3055\u3093\u304c\u623b\u3057\u3066\u304d\u305f\u30b9\u30c6\u30fc\u30c8\u304c\u4e00\u81f4\u3059\u308b\u304b\u78ba\u8a8d\u3057\u307e\u3059\u3002 OK\u306a\u3089\u3070\u3001Developer Console\u3067\u767b\u9332\u3057\u305f\u3001CLIENT_ID\u3068CLIENT_SECRET\u3092\u4f7f\u3044\u3001 \u30c8\u30fc\u30af\u30f3\u3092\u53d6\u5f97\u3057\u306b\u884c\u304d\u307e\u3059\u3002 \u6700\u5f8c\u306b\u5f97\u3089\u308c\u305f\u30c8\u30fc\u30af\u30f3\u3092\u4f7f\u3063\u3066\u3001API\u547c\u3073\u51fa\u3057\u3092\u3057\u3066Google\u306b\u767b\u9332\u3055\u308c\u3066\u3044\u308b\u60c5\u5831\u3092\u8aad\u307f\u51fa\u3057\u307e\u3059\u3002 \u3067\u3001cookies\u306b\u5f97\u3089\u308c\u305f\u60c5\u5831\u3092\u30bb\u30c3\u30c8\u3057\u3066\u3001\u3053\u306e\u30e1\u30bd\u30c3\u30c9\u3092\u629c\u3051\u307e\u3059\u3002 cookies[:google_code] = params[:code] cookies[:email] = email cookies[:google_uid] = api_result[“user_id”] [bash] class OauthController < ApplicationController #URL \/oauth_google \u3078\u306e\u51e6\u7406 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 [\/bash] \u30b9\u30c6\u30c3\u30d7\uff13(Rails\u306eJavascript) OauthController\u306egoogle\u30e1\u30bd\u30c3\u30c9\u3067\u51e6\u7406\u3092\u3057\u305f\u306e\u3067\u3001\u666e\u901a\u306b\u51e6\u7406\u304c\u7d42\u308f\u308c\u3070\u3001\u30dd\u30c3\u30d7\u30a2\u30c3\u30d7\u753b\u9762\u306b\u306f \u305d\u306e\u30e1\u30bd\u30c3\u30c9\u306b\u5bfe\u5fdc\u3059\u308b\u30d3\u30e5\u30fc\u304c\u8868\u793a\u3055\u308c\u307e\u3059\u3002 \u306a\u306e\u3067\u3001\u5bfe\u5fdc\u3059\u308b\u30d3\u30e5\u30fc\u306f\u4f5c\u308b\u306e\u3067\u3059\u304c\u3001\u3042\u304f\u307e\u3067\u30c0\u30df\u30fc\u3067\u7d50\u69cb\u3067\u3059\u3002 \u305d\u3082\u305d\u3082\u3001\u30dd\u30c3\u30d7\u30a2\u30c3\u30d7\uff08\u5225\u30bf\u30d6\uff09\u3067Google\u8a8d\u8a3c\u304c\u958b\u3044\u3066\u3044\u3066\u3001\u8a8d\u8a3c\u304c\u7d42\u308f\u308c\u3070\u30dd\u30c3\u30d7\u30a2\u30c3\u30d7\u306f\u9589\u3058\u3066\u307b\u3057\u3044 \u306f\u305a\u3067\u3059\u306e\u3067\u30fb\u30fb\u30fb \u3067\u3001assets\/javascripts \u914d\u4e0b\u306b\u4ee5\u4e0b\u306e\u3088\u3046\u306aJavaScript\uff08CoffeeScript\u3067\u306f\u306a\u3044\uff09\u3092\u4f5c\u308a\u307e\u3059\u3002 \u30d5\u30a1\u30a4\u30eb\u540d\u306f\u306a\u3093\u3067\u3082\u3044\u3044\u3002 \u3067\u3001\u3053\u3053\u3067\u3059\u308b\u51e6\u7406\u306f\u3001\u30c0\u30df\u30fc\u306e\u30d3\u30e5\u30fc\u304c\u8868\u793a\u3055\u308c\u305f\u6642\u306b\u305d\u306ehref\u3092\u30c1\u30a7\u30c3\u30af\u3057\u3066\u3001 \u8a8d\u8a3c\u7d42\u4e86\u306e\u30c0\u30df\u30fc\u30d3\u30e5\u30fc\u3060\u3068\u5224\u5b9a\u3067\u304d\u305f\u3089\u3001window.close\u3057\u3066\u3084\u308b\u3068\u3044\u3046\u3082\u306e\u3067\u3059\u3002 [bash] $(function(){ if (window.location.href.indexOf(“oauth_google”) >0){ window.close(); } }); [\/bash] \u30b9\u30c6\u30c3\u30d7\uff14(SPA\u306eJavascript) \u6700\u5f8c\u306b\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u30b5\u30a4\u30c9\u3067\u3059\u3002window.open\u306e\u6642\u306bsetTimeout\u3067\u547c\u3070\u308c\u308b\u30e1\u30bd\u30c3\u30c9\u3067\u3059\u3002 windowLogin.closed\u306e\u72b6\u614b\u3092\uff11\u79d2\u9593\u9694\u3067\u30c1\u30a7\u30c3\u30af\u3057\u3001Google\u306e\u8a8d\u8a3c\u753b\u9762\u304c\u9589\u3058\u305f\u3089 alert\u306b\u8a8d\u8a3c\u3067\u5f97\u3089\u308c\u305f\u60c5\u5831\u3092\u30af\u30c3\u30ad\u30fc\u304b\u3089\u8868\u793a\u3057\u307e\u3059\u3002\uff08\u5225\u306b\u8868\u793a\u3059\u308b\u5fc5\u8981\u306f\u306a\u3044\u306e\u3067\u3059\u304c\u30fb\u30fb\u30fb\uff09 \u3067\u3001\u8a8d\u8a3c\u304c\u901a\u3063\u305f\u3068\u5224\u5b9a\u3067\u304d\u305f\u3089\u3001\u30a2\u30d7\u30ea\u306e\u30c8\u30c3\u30d7\u30da\u30fc\u30b8\u306a\u3069\u3078\u30b8\u30e3\u30f3\u30d7\u3057\u3066\u3084\u308a\u307e\u3059\u3002 \u3042\u3068\u306fSPA\u306a\u306e\u3067API\u30b5\u30fc\u30d0\u30fc\u3078\u30a2\u30af\u30bb\u30b9\u3059\u308b\u305f\u3073\u306b\u304a\u305d\u3089\u304f\u30e6\u30fc\u30b6\u30fc\u8a8d\u8a3c\u3082\u5fc5\u305a\u3059\u308b\u3053\u3068\u306b\u306a\u308b\u3068\u601d\u3046\u306e\u3067\u3001 API\u3092\u547c\u3076\u305f\u3073\u306b\u3001\u3053\u3053\u3067\u5f97\u3089\u308c\u305f\u60c5\u5831\u3092\u4ed8\u4e0e\u3057\u3066\u3084\u308b\u30a4\u30e1\u30fc\u30b8\u3067\u3057\u3087\u3046\u304b\u30fb\u30fb\u30fb \u672c\u984c\u3068\u306f\u305d\u308c\u307e\u3059\u304c\u3001setTimeout\u3067\u5f15\u6570\u3092\u3064\u3051\u305ffunction\u3092\u547c\u3073\u305f\u3044\u3068\u304d\u306f \u7121\u540d\u95a2\u6570\u3068\u3059\u308b \u306e\u304c\u30eb\u30fc\u30eb\u306e\u3088\u3046\u3067\u3059\u3002 [bash] 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(“\u8a8d\u8a3c\u306b\u5931\u6557\u3057\u307e\u3057\u305f”) } } else{ setTimeout(function(){CheckLoginStatusGoogle(history)}, 1000) } } [\/bash] \u3042\u3068\u304c\u304d \u3042\u3063\u3055\u308a\u3068\u8aac\u660e\u3057\u3061\u3083\u3044\u307e\u3057\u305f\u304c\u3001\u7406\u5c48\u304c\u308f\u304b\u308b\u307e\u3067\u7d50\u69cb\u6642\u9593\u304c\u304b\u304b\u308a\u307e\u3057\u305f\u3002 SPA\u3067SNS\u8a8d\u8a3c\u3059\u308b\u306a\u3089\u3069\u3046\u3059\u308a\u3083\u3044\u3044\u3093\u3060\u3068\u3044\u3046\u60c5\u5831\u304c\u3001\u4ee5\u5916\u306b\u306a\u304f\u3066\u30fb\u30fb\u30fb \u3042\u3061\u3053\u3061\u8aad\u307f\u6f01\u3063\u3066\u3001\u306a\u3093\u3068\u304b\u5f62\u306b\u306a\u308a\u307e\u3057\u305f\u3002 \u4f55\u304b\u306e\u53c2\u8003\u306b\u306a\u308c\u3070\u3068\u30fb\u30fb\u30fb\u30fb<\/p>\n","protected":false},"author":1,"featured_media":1618,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_uf_show_specific_survey":0,"_uf_disable_surveys":false,"footnotes":""},"categories":[6,77],"tags":[80,71,72],"class_list":{"0":"post-1608","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-rails","8":"category-react","9":"tag-oauth","10":"tag-rails","11":"tag-reactjs"},"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/lovelinux.mydns.jp\/index.php?rest_route=\/wp\/v2\/posts\/1608","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lovelinux.mydns.jp\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lovelinux.mydns.jp\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lovelinux.mydns.jp\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lovelinux.mydns.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1608"}],"version-history":[{"count":3,"href":"https:\/\/lovelinux.mydns.jp\/index.php?rest_route=\/wp\/v2\/posts\/1608\/revisions"}],"predecessor-version":[{"id":1815,"href":"https:\/\/lovelinux.mydns.jp\/index.php?rest_route=\/wp\/v2\/posts\/1608\/revisions\/1815"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/lovelinux.mydns.jp\/index.php?rest_route=\/wp\/v2\/media\/1618"}],"wp:attachment":[{"href":"https:\/\/lovelinux.mydns.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1608"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lovelinux.mydns.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1608"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lovelinux.mydns.jp\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1608"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}