差分

この文書の現在のバージョンと選択したバージョンの差分を表示します。

--- reactnative:expo:googleサインイン [2019/02/03 12:50]
ips
+++ reactnative:expo:googleサインイン [2019/02/16 14:10] (現在)
ips
@@ ライン 1: / ライン 1: @@
 ====== googleサインイン ======
-SDK32になると、使えなくなった。
+Expo.Google.logInAsync を使ったGoogleサインイン。
-現在対応検討中。
+===== Error: cannot set promise - some async operation is still in progress =====
+<code>
+Error: cannot set promise - some async operation is still in progress
+</code>
+SDK32になると、使えなくなった。
+現在対応検討中。
 それまでSDK31を使う。
-====== TypeError: Cannot read property 'Google' of undefined ======
+===== TypeError: Cannot read property 'Google' of undefined =====
 <code>
@@ ライン 15: / ライン 20: @@
 import Expo from "expo"は使えなくなった。
 import * as Expo from "expo"を使う。
+===== 設定手順 =====
+====  Google認証情報作成（Google developers consoleで認証情報を作成） ====
+[[https://console.developers.google.com/apis/dashboard|Google developers console]]で任意のプロジェクトを作成する。
+認証情報画面を開き、認証情報を作成でOAuthクライアントIDを作成する。
+{{:reactnative:expo:pasted:20190205-001345.png}}
+SHA-1 署名証明書フィンガープリントを発行する。
+<code>
+> openssl rand -base64 32 | openssl sha1 -c
+</code>
+発行したフィンガープリントを設定し、
+パッケージ名にはhost.exp.exponentを設定する。
+{{:reactnative:expo:pasted:20190205-001549.png}}
+発行されたクライアントIDをアプリに設定する。
+{{:reactnative:expo:pasted:20190205-001737.png}}
+==== React のコード ====
+=== 認証 ===
+<code>
+    try {
+      const result = await Expo.Google.logInAsync({
+        androidClientId: androidClientId,
+          scopes: ["profile", "email","https://www.googleapis.com/auth/spreadsheets"]
+      })
+      if (result.type === "success") {
+        console.log(result)
+        this.setState({
+          signedIn: true,
+          name: result.user.name,
+          photoUrl: result.user.photoUrl,
+          accessToken:result.accessToken,
+          refreshToken:result.refreshToken,
+        })
+        ・・・
+</code>
+=== リフレッシュトークンを使ってアクセストークンを更新 ===
+<code>
+    try {
+      let url= "https://accounts.google.com/o/oauth2/token"
+      let bodyString = JSON.stringify({
+        client_id:androidClientId ,
+        refresh_token:this.state.refreshToken ,
+        grant_type:"refresh_token" ,
+      })
+      const result = await fetch(url, {
+        method: 'POST',
+        headers: {
+          Accept: 'application/json',
+          'Content-Type': 'application/json',
+        },
+        body: bodyString
+      });
+      let responseJson = await result.json();
+      if (responseJson.access_token !== undefined) {
+        //ステート更新
+        this.setState({
+          accessToken : responseJson.access_token
+        })
+        ・・・
+</code>
+=== userinfo取得 ===
+<code>
+        let userInfoResponse = await fetch('https://www.googleapis.com/userinfo/v2/me', {
+            headers: { Authorization: `Bearer ${value}` },
+        });
+        let userInfo = await userInfoResponse.json();
+        console.log(userInfo)
+        this.setState({
+          signedIn: true,
+          name: userInfo.name,
+          photoUrl: userInfo.picture
+        })
+</code>
+===== エラー１ (crash)=====
+apkにしたときオプションにbehavior:webだとクラッシュする。
+systemだと内部ブラウザが立ち上がり、ログインしても何もかえってこない。
+下記ドキュメントをよくみてみるとandroidStandaloneAppClientIdに変更する必要がる。
+[[https://docs.expo.io/versions/v31.0.0/sdk/google/|Google]]
+<code>
+・androidClientId (string) -- The Android client id registered with Google for use in the Expo client app.
+　　⇒expoのデバッグ用
+・androidStandaloneAppClientId (string) -- The Android client id registered with Google for use in a standalone app.
+　　⇒apkを作るときにはこちらで設定する。
+</code>
+<code>
+    try {
+      const result = await Expo.Google.logInAsync({
+        androidStandaloneAppClientId: androidClientId,
+          scopes: ["profile", "email","https://www.googleapis.com/auth/spreadsheets"],
+          behavior: 'web'
+      })
+      if (result.type === "success") {
+      ・・・
+</code>
+===== エラー２ （redirect_uri_mismatch）=====
+エラー１の設定変更(androidStandaloneAppClientIdとbehaviorの変更)により、apkでも外部ブラウザにとぶようになるが、redirect_uriのエラーがでる場合がある。
+expoのテストではパッケージ名に「host.exp.exponent」を設定していた箇所に、実際のアプリのパッケージ名を設定する。
+下記の場合は「com.nekotype.expo.meomry2」
+{{:reactnative:expo:pasted:20190216-140846.png}}
+<code>
+redirect_uri=com.nekotype.expo.meomry2:/oauthredirect
+client_id=xxxxx.apps.googleusercontent.com
+response_type=code
+state=xxxx
+scope=profile email https://www.googleapis.com/auth/spreadsheets
+code_challenge=xxxx
+code_challenge_method=xx
+That’s all we know.
+</code>

猫型iPS細胞研究所

ユーザ用ツール

サイト用ツール

差分

ページ用ツール