こんにちは、技術1課の加藤です。
最近 Amplify にハマって色々と触ってみているのですが、 Amplify って複数のクライアントプラットフォームに対応しているんですよね。
マルチプラットフォームに対応しているからにはやっぱり複数のプラットフォームでバックエンドを共有したいもの。
というわけで今回は React を使ってウェブアプリとネイティブアプリを作成し、同じ認証情報を使ってログインしてみます。
1. React ウェブアプリ
まずはウェブアプリ + 認証機構の実装を行います。
1-1. React アプリの作成
$ npx create-react-app react-amplify $ cd react-amplify
一応、ちゃんと動くか確認します。
$ yarn start or $ npm start
以下の画面が開けばOKです。
確認が終わったら Ctrl + C で開発サーバーを止めておきます。
1-2. AWS 接続情報の設定
以下のコマンドで AWS 接続情報の設定をします。
(すでに設定が済んでいる場合はこの手順は省略可能です)
$ amplify configure
1-3. Amplify プロジェクトの作成
$ amplify init Note: It is recommended to run this command from the root of your app directory ? Enter a name for the project react-amplify ? Enter a name for the environment dev ? Choose your default editor: Vim (via Terminal, Mac OS only) ? Choose the type of app that you're building javascript Please tell us about your project ? What javascript framework are you using react ? Source Directory Path: src ? Distribution Directory Path: build ? Build Command: npm run-script build ? Start Command: npm run-script start Using default provider awscloudformation For more information on AWS Profiles, see: https://docs.aws.amazon.com/cli/latest/userguide/cli-multiple-profiles.html ? Do you want to use an AWS profile? Yes ? Please choose the profile you want to use amplify
1-4. 認証機能のバックエンドリソースを作成
$ amplify add auth Using service: Cognito, provided by: awscloudformation The current configured provider is Amazon Cognito. Do you want to use the default authentication and security configuration? Defau lt configuration Warning: you will not be able to edit these selections. How do you want users to be able to sign in? Username Do you want to configure advanced settings? No, I am done.
設定を確認します。
$ amplify status Current Environment: dev | Category | Resource name | Operation | Provider plugin | | -------- | -------------------- | --------- | ----------------- | | Auth | reactamplifyxxxxxxxx | Create | awscloudformation |
大丈夫そうであればデプロイします。
$ amplify push
1-5. フロントエンドのコードに認証機能を実装
簡単に実装します。
まずは必要なライブラリのインストールから。
$ yarn add aws-amplify aws-amplify-react or $ npm install aws-amplify aws-amplify-react
src/App.js
を開き以下のように編集します。
import React from 'react'; import logo from './logo.svg'; import './App.css'; import Amplify from 'aws-amplify'; // 追加 import awsconfig from './aws-exports'; // 追加 import { withAuthenticator } from 'aws-amplify-react'; // 追加 Amplify.configure(awsconfig); // 追加 function App() { return ( <div className="App"> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <p> Edit <code>src/App.js</code> and save to reload. </p> <a className="App-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer" > Learn React </a> </header> </div> ); } export default withAuthenticator(App); // 編集
1-6. 実装した認証機構を使ってアカウントを作成
ではアカウントを作成してみましょう。 yarn start
するとブラウザにログイン画面が表示されます。
[Create account] を選択し、アカウント作成画面に移ります。
必要な情報を入力して [CREATE ACCOUNT] を押下します。
このあと登録したメールアドレスに認証コードが発行されるので、アドレスは普通に使えるものを入力してください。
Confirmation Code を入力して、 [CONFIRM] を押下してください。
これでアカウントが作成されます。
登録した Username および Password を使ってログインできることを確認してください。
ログインが完了すると、 React の初期ページが表示されます。
2. React Native アプリ
ウェブアプリケーションでの実装が確認できたので、次はReact Native のアプリケーションを作ってみましょう。
今回は Expo を用いて実装します。
2-1. React Native アプリの作成
expo cli を用いてアプリを作成します。以下のコマンドを実行してください。
なお途中テンプレートを聞かれるので、 blank を選んでください。
$ expo init react-native-amplify $ cd react-native-amplify
こちらもひとまずちゃんと動くか確認します。
$ yarn start or $ npm start
こんな画面が出てきます。
ぼくはiOSアプリで動きを確認したいので、 Run on iOS simulator
を選び、シミュレータを起動します。
iOS シミュレータを使う方法に関しては Expoのドキュメント を参考にしてください。(Android を試したい方はこちら )
以下のような画面が立ち上がればOKです。
2-2. バックエンドリソースの設定
さて、ここから共通のバックエンドリソースを使う設定を行っていきます。
といっても難しいことはありません。
以下のように、コマンドと数回の選択を行うだけ。余裕。
$ amplify pull For more information on AWS Profiles, see: https://docs.aws.amazon.com/cli/latest/userguide/cli-multiple-profiles.html ? Do you want to use an AWS profile? Yes ? Please choose the profile you want to use amplify ? Which app are you working on? xxxxxxxxx Backend environment 'dev' found. Initializing... ? Choose your default editor: Vim (via Terminal, Mac OS only) ? Choose the type of app that you're building javascript Please tell us about your project ? What javascript framework are you using react-native ? Source Directory Path: / ? Distribution Directory Path: / ? Build Command: npm run-script build ? Start Command: npm run-script start ? Do you plan on modifying this backend? Yes
これにより、 amplify
ディレクトリ および aws-exports.js
ファイルが生成されます。
2-3. フロントエンドのコードに認証機能を実装
必要なライブラリをインストールします。
$ yarn add aws-amplify aws-amplify-react-native or $ npm install aws-amplify aws-amplify-react-native
./App.js
を開き、以下の通り修正します。
import React from 'react'; import { StyleSheet, Text, View } from 'react-native'; import Amplify from 'aws-amplify'; // 追加 import awsconfig from './aws-exports'; // 追加 import { withAuthenticator } from 'aws-amplify-react-native’; // 追加 Amplify.configure(awsconfig); // 追加 function App() { // 編集 return ( <View style={styles.container}> <Text>Open up App.js to start working on your app!</Text> </View> ); } export default withAuthenticator(App); // 追加 const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', }, });
この状態でシミュレータを動かしたら以下のエラーが発生しました。。。
Unable to resolve “@react-native-community/netinfo” from “node_modules/@aws-amplify/core/lib/Util/Reachability.native.js”
@react-native-community/netinfo
が必要とのことなので、インストールします。
$ yarn add @react-native-community/netinfo or $ npm install @react-native-community/netinfo
改めてシミュレータを動かしたところ、ちゃんと動きました
2-4. ログインしてみる
さて、正しく環境が作れていれば、ここで先ほど作成したユーザーでのログインが可能なはずです。
試してみましょう。
シミュレータを立ち上げると、ログイン画面が表示されます。
ここに先ほど作成したユーザーの Username および Password を入力してみましょう。
ログインして、 React Native の初期ページが表示されれば、完了です。
まとめ
マルチプラットフォームの対応はどうやるんだというのが気になり、今回 React を使ってウェブアプリとネイティブアプリを実装してみました。
簡単ですので、ぜひ試してみてください。