使用 React Native 與 Amazon Cognito 實作 Google & Facebook 登入的功能

Standard

在 App 端補上註冊(register)的 function

上面忙了這麼一大段設定,為的就是讓 App 用戶在點擊登入按鈕後,可以將取得的身分資料存入 Identity ID 的 Datasets 中,並能夠在登入後取回並顯示使用者名稱。

  1. 先在 utils/auth.js 補上 register function:
    async function register(passedInToken) {
      const openIdToken = passedInToken || (await openIdTokenPromise);
      const payload = {
        accessToken: globalAccessToken,
        openIdToken,
      };
    
      try {
        const rsp = await fetch(`${剛剛的 API Gateway 網址}/register`, {
          method: 'POST',
          headers: {
        'Content-Type': 'application/json',
          },
          body: JSON.stringify(payload),
        });
    
        const json = await rsp.json();
    
        if (json.statusCode === 401) {
          const newToken = await refreshToken(); // 這邊礙於篇幅略過不提,請直接見 repo source code
    
          return await register(newToken);
        }
    
        return json.userData;
      } catch (e) {
        console.log('Error: ', e);
      }
    }
    

    並一樣請加入到 export 中:

    export {
      init,
      loginFB,
      loginGoogle,
      logout,
      register, // here
    };
    
  2. app.js 中:

    補上初始化的 profile state:

    state = {
      loggedIn: false,
      isLoading: false,
      profile: {},
    };
    

    render 的部份補上使用者登入後的資訊(name):

    {loggedIn && <View style={styles.welcome}>
        <Text style={styles.welcomeText}>
          Hello {profile.name}!{"\n"}
          You're logged in!
        </Text>
    
        <TouchableOpacity onPress={() => this.handleLogout()} style={styles.logoutButton}>
          <Text style={styles.logoutButtonText}>Logout</Text>
        </TouchableOpacity>
      </View>}
    

    修改 handleLogin,加上 register 與設定 profile 的部份:

    handleLogin = async (type) => {
      let result = {};
    
      this.setState({
        isLoading: true,
      });
    
      try {
        if (type === 'facebook') {
          result = AuthUtils.loginFB().catch(() => {
        this.setState({
          isLoading: false,
        });
          });
        } else if (type === 'google') {
          result = await AuthUtils.loginGoogle();
        }
      } catch (err) {
        this.setState({
          isLoading: false,
        });
      }
    
      if (result) {
        const profile = await AuthUtils.register();
    
        this.setState({
          loggedIn: true,
          isLoading: false,
          profile,
        });
      } else {
        this.setState({
          isLoading: false,
          profile: {},
        });
      }
    }
    

至此就完成這個 prototype 啦!附個完成圖:

image

Source Code

完整的程式碼請見我的 GitHub,只是概念驗證,code 寫的髒髒請不要見怪 😅😅😅

參考資料

第 5 頁 / 共 5 頁12345

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *