React Native Applicationを構築し、OAuth2.0で認証する

反応ネイティブアプリの認証機能を簡単に統合できます。 OIDCを使用すると、OKTA APIを直接認証できます。この記事では、Reactネイティブアプリケーションでこの機能を実装する方法を示します。 AppAuthライブラリを使用して、OIDCを介してログインユーザーをリダイレクトする方法を学びます。

Reactネイティブは効率的なフレームワークです。 Ionicやその他のハイブリッドモバイルフレームワークとは異なり、Webテクノロジー（ReactおよびJavaScript）を使用してネイティブモバイルアプリケーションを構築できます。ブラウザやWebViewは含まれていないため、Reactネイティブを使用したモバイルアプリの開発は、エミュレータまたはデバイスですべてのテストを行うネイティブSDKを使用することに似ています。ブラウザではIonicほどテスト可能ではありません。ブラウザやデバイスで個別に実行されるコードを記述する必要がないため、これは利点をもたらす可能性があります。

Googleのトレンドをチェックすると、React NativeはAndroidやiOSよりもネイティブ開発でさらに人気があることがわかります。

この記事では、React Nativeの最新バージョンを使用してアプリケーションを開発する方法について説明します。執筆時点では、最新のバージョンはReact 16.2.0で、ネイティブ0.54.0に反応します。新しいアプリを作成し、認証用のAppauthを追加し、認証にOKTAを使用し、iOSとAndroidで実行します。

Appauthは、OAUTH 2.0およびOpenID Connectを使用して、エンドユーザーの認証と承認のためのネイティブアプリケーションクライアントSDKです。 iOS、MacOS、Android、ネイティブJS環境に適しており、ネイティブアプリの認証と承認のための最新のセキュリティとユーザビリティのベストプラクティスを実装しています。

reactネイティブアプリを作成します

Reactには、新しいReactアプリの作成に使用できるCreate-React-Appと呼ばれるコマンドラインツール（CLI）があります。 React Nativeには、Create React Native Appと呼ばれる同様のツールもあります。インストールする前に、ノードV6以降がインストールされていることを確認してください。

create-react-native-appをインストールし、okta-rn：

という新しいプロジェクトを作成します

<code>npm install -g create-react-native-app
create-react-native-app okta-rn
cd okta-rn
npm start</code>

これらのコマンドを実行した後、端末はいくつかのオプションを促します。

<code>...（省略终端输出，与原文相同）</code>

MACを使用している場合は、iOSエミュレータを開くためにiを押します。エキスポをインストール/オープンするように求められ、レンダリングされたapp.jsをレンダリングするように求められます。

WindowsまたはLinuxを使用している場合は、AndroidエミュレータまたはAndroidデバイスを使用してみることをお勧めします（持っている場合）。うまくいかない場合は、心配しないでください。これを後で修正する方法について説明します。

ヒント：MicrosoftのTypeScript Reactネイティブスターターを使用して、ReactネイティブアプリでJavaScriptの代わりにTypeScriptを使用できます。このアプローチを使用することにした場合は、このチュートリアルが完了した後、アプリケーションを変換する手順に従うことをお勧めします。

ネイティブとOAUTH 2.0 この場合、Frivedableが作成したライブラリであるReact Native App Authを使用します。このライブラリを使用する理由は3つあります他のメソッド実行。

React-Native-oauthを試しましたが、新しいプロバイダーを追加する前に既存のプロバイダーを使用する必要があることがわかりました。 Oktaをプロバイダーとして使用したいだけです。さらに、多くの問題とリクエストも警告信号を送信します。
React-Native-Simple-authを試しましたが、非推奨ナビゲ​​ーターコンポーネントを最新のReactネイティブバージョンで動作させるのに問題があります。
このReact Native Oauth 2チュートリアルを試しましたが、アプリにリダイレクトされるのに問題がありました。

OKTA

でネイティブアプリを作成します

React NativeアプリにAppauthを追加する前に、承認するためにアプリが必要です。まだ無料のOKTA開発者アカウントを持っていない場合は、今すぐサインアップしてください！

OKTA開発者アカウントをログインし、アプリケーションに移動します。ネイティブをクリックして、[次へ]をクリックします。アプリケーション（たとえば、Native）に名前を付け、認証タイプとしてトークンを更新し、デフォルトの認証コードを選択します。ログインリダイレクトURI（たとえば、com.oktapreview.dev-158606：/callback）をコピーし、場所に保存します。この値は、アプリケーションを構成するときに必要です。

[完了]をタップすると、次の画面にクライアントIDが表示されます。この値をコピーして保存します。

認証のために反応ネイティブアパースを追加

アプリのネイティブ構成を「ポップアップ」する必要があります。これは通常、Create-React-Native-Appによって隠されています。

<code>npm install -g create-react-native-app
create-react-native-app okta-rn
cd okta-rn
npm start</code>

システムが質問に答えるように求めている場合、次の回答を使用してください。

質問 回答

Create-react-native-appからどのようにポップアップしたいですか？ 反応ネイティブ ユーザーのホームページにアプリを表示するコンテンツは何ですか？ okta rn Android StudioとXcodeプロジェクトには何の名前が付けられるべきですか？ oktarn

react Native App Authをインストールするには、次のコマンドを実行します。

<code>npm install -g create-react-native-app
create-react-native-app okta-rn
cd okta-rn
npm start</code>

これらのコマンドを実行した後、ネイティブiOSプロジェクトを構成する必要があります。便利なため、次の手順をコピーしました。

iOS設定

Native App AuthはAppauth-Iosに依存するため、依存関係として構成する必要があります。最も簡単な方法は、ココアポッドを使用することです。 cocoapodsをインストールするには、次のコマンドを実行します

プロジェクトのiOSディレクトリにPodfileを作成します。これは、AppAuth-Iosを依存関係として指定します。 oktarnがNPMの実行時に指定されたアプリケーション名と一致していることを確認してください。

<code>...（省略终端输出，与原文相同）</code>

その後、iOSディレクトリからpodインストールを実行します。最初の実行には、速い接続があってもしばらく時間がかかります。今がコーヒーやウイスキーを食べる良い時期です！ ？

iOSディレクトリからOpen oktarn.xcworkspaceを実行して、xcodeでプロジェクトを開きます。

<code>npm run eject</code>

（次のコンテンツは元のテキストと同じであり、重複した部分は省略されており、必要な変更と説明のみが保持されます）

...（残りは元のテキストと同じで、重複したコードと説明を省略しています）

以上がReact Native Applicationを構築し、OAuth2.0で認証するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。