在 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 啦！附個完成圖：

Source Code

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

• React Native Cognito Login Example – 用 React Native 寫的登入範例
• Cognito Login Example API (with AWS Lambda) – 用 Lambda 寫的 API

參考資料

• detail step-by-step guide – @chunghe – aws-sdk-react-native
• （八）API Gateway－－AWS經驗教學
• How to enable CloudWatch logs for API Gateway