猫型iPS細胞研究所

この文書は読取専用です。文書のソースを閲覧することは可能ですが、変更はできません。もし変更したい場合は管理者に連絡してください。
====== googleサインイン ======

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 =====

<code>
error [TypeError: Cannot read property 'Google' of undefined]
</code>

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細胞研究所

ユーザ用ツール

サイト用ツール

ページ用ツール
