OKTAとステンシルでPWAにAUTHを追加する方法-jsチュートリアル-php.cn

OKTAとステンシルでPWAにAUTHを追加する方法

William Shakespeare

リリース： 2025-02-15 09:18:12

オリジナル

487 人が閲覧しました

プログレッシブWebアプリ（PWAS）は、Web開発に革命をもたらし、多様な開発チーム間の一貫した更新を維持するという課題と、Webアプリ開発とモバイルアプリ開発の間で選択するジレンマの解決策を提供します。 PWAは、複数のチームとコードベースを管理するオーバーヘッドなしで、多くのモバイルアプリ機能を提供します。

キャッシュとサービスワーカーのおかげで、彼らのパフォーマンスは、遅い接続またはオフラインの接続でも例外的です。サービスワーカーは、サーバーのリクエストを傍受し、キャッシュされたデータの優先順位付け、利用可能な場合は新しいサーバーデータで更新します。

イオンチームのステンシルプロジェクトはゲームチェンジャーです。 Stencilは、従来のJavaScriptフレームワークの膨張を回避するコンパイラ生成標準に準拠したWebコンポーネントです。コードをバニラコンポーネントにまとめ、優先フレームワークとシームレスに統合します。ステンシルスタータープロジェクトは素晴らしい出発点であり、ほぼ完璧な灯台PWAスコアを達成しています。ステンシルでPWAの構築：ステップバイステップガイド

スターターアプリケーションを設定します：

スターターアプリケーションをクローンし、githubリモコンを削除します：
依存関係をインストール：
```
git clone https://github.com/ionic-team/stencil-starter.git my-stencil-app
cd my-stencil-app
git remote rm origin
```
ログイン後にコピー
（
についての警告を無視してください - これは既知のnpmの問題です。）
```
npm install
```
ログイン後にコピー
node-pre-gypfseventsOkta Auth SDKを統合する（CDN経由）：
okta auth sdkを
に追加してくださいタグ：

（CDNを使用することは現在、NPMパッケージよりもステンシルで信頼性が高くなります。）index.html </body>
正確なPWA評価のための生産ビルド：
```
<🎜>
```
ログイン後にコピー
実行
フォルダーが作成されます。開発ビルド（
）はPWA機能を正確に反映していないことに注意してください。

oktaアプリケーションを構成：npm run buildwww sw.js無料のOkta開発者アカウントを作成します（持っていない場合）。新しいシングルページアプリアプリケーションを追加して、「ステンシルスパ」のような記述的なものに名前を付けます。ベースURIを設定し、urisをnpm startにリダイレクトします。クライアントIDおよびOKTA組織URL（例：
）に注意してください。
http://localhost:3333認証コンポーネント（https://dev-XXXXXX.oktapreview.com）を作成します

フォルダーにapp-auth.cssおよびapp-auth.tsxを作成します。 components/app-authファイルには、Oktaauth SDKを使用したログインフォームと認証ロジックが含まれます。（元の記事の完全なコードの例を参照してください。）app-auth.tsx
ログインメソッドを追加：
メソッドは、OKTAでユーザー認証を処理し、IDトークンをLocalStorageに保存し、ログインを成功させるとプロファイルページにリダイレクトします。エラー処理が含まれています。（元の記事の完全なコードの例を参照してください。）
login()
ログイン機能の強化：
IDトークンがLocalStorageに既に存在している場合、ユーザーをプロファイルページに直接リダイレクトするために
実装します。 Enterキーを介してログインを許可するために
リスナーを追加します。 componentWillLoad() keydown.enter
）：
を開発します app-profileユーザークレームの構造を定義するインターフェイス（）を作成します。更新
保存されたIDトークンからユーザーのクレームを表示し、ログアウトボタンを含めます。プレレンダーの可能性のある
シナリオを処理します。（元の記事の完全なコードの例を参照してください。）AppUser.tsx app-profile.tsx isServer
を使用して、
にログインページとプロファイルページにルートを追加します。ホームページのリンクを
。components/my-app/my-app.tsxに更新します <stencil-route></stencil-route> /profile
CSSを使用したログインフォームとプロファイルページの視覚的な魅力を強化します。（元の記事の完全なコードの例を参照してください。）

この拡張ガイドは、ステンシルとOKTAを使用した認証を使用してPWAを構築するためのより明確で簡潔なウォークスルーを提供します。完全なコードスニペットについては、元の記事を参照してください。元の記事の画像は、コンテキストを維持するために含まれています。

以上がOKTAとステンシルでPWAにAUTHを追加する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。