ログインと認(rèn)証サービスの構(gòu)築は時(shí)間がかかり、ユーザープロセスに価値を追加しませんが、何か間違った場(chǎng)合は損傷を引き起こす可能性があります。認(rèn)証を提供するサービスがより良く、より安価になるにつれて、アプリケーション用の獨(dú)自のパスワード検証システムを構(gòu)築する理由はあまりありません。

1. 無料のFronteggアカウントを作成します

Webサイトを通じてFronteggアカウントを作成します。開始時(shí)にパスワードレスオプションとしてマジックコードまたはマジックリンクを必ず選択してください！

2. 統(tǒng)合プロセスを開始

ログインボックスの作成を完了し、パスワードレスメソッドを選択したら、「開発するための公開」オプションが表示されます。

Fronteggの使用環(huán)境（開発、品質(zhì)保証、ステージング、生産）、これらの環(huán)境には、認(rèn)証環(huán)境のユニークなサブドメイン、キー、およびURLがあります。

サンプルコード、さらに重要なことにはbaseURLとclientIDを備えたページに移動(dòng)します。このページを開いたままにして、IDEにアクセスして、次のステップに進(jìn)んでください。

3. Reactアプリケーションを作成します（既に自分のアプリケーションがある場(chǎng)合はこの手順をスキップしてください）

端末に次のコマンドを入力して、新しいReactアプリケーションを作成し、新しいディレクトリに移動(dòng)します。

<code>npx create-react-app app-with-frontegg
cd app-with-frontegg</code>

4. frontegg

   をインストールしてインポートします

次のコマンドを?qū)g行して、Frontegg React LibraryとReact-Routerをインストールします。アプリケーションにReact-Routerがすでにインストールされている場(chǎng)合は、インストールをスキップできます。

<code>npm install @frontegg/react react-router-dom</code>

5. ログイン設(shè)定を構(gòu)成

src/index.jsファイルで、次のコードを追加します。次に、Fronteggページに戻り、コードの例からbaseUrlとclientIDを見つけます。

注：この導(dǎo)入プロセスを完了した後、これらの値はいつでもワークスペースの管理セクションにあります。

import React from 'react';
import ReactDOM from 'react-dom'; // For react 17
// For react 18: import ReactDOM from 'react-dom/client';
import App from './App';
import './index.css';

import { FronteggProvider } from '@frontegg/react';

const contextOptions = {
  baseUrl: '## YOUR BASE URL ##',
  clientId: '## YOUR CLIENT ID ##'
};

// For react 18: 
// const root = ReactDOM.createRoot(document.getElementById('root'));
// root.render(
ReactDOM.render(
    <FronteggProvider contextOptions={contextOptions} hostedLoginBox={true}>
        <App />
    </FronteggProvider>,
    document.getElementById('root')
);

6. ログインページにリダイレクト

Frontegg Useauthフックを使用して、ユーザーが認(rèn)証されているかどうかを判斷できます。ユーザーが認(rèn)証されていない場(chǎng)合は、useloginwithredirectフックを使用して、ユーザーをログインページにリダイレクトできます（以下の例を參照）。

<code class="javascript">import './app.css';
// 'react'から{useefcect}をインポートします。
'@frontegg/rest-api'から{contextholder}をインポートします。
輸入 {
  useauth、useloginwithredirect
} "@frontegg/React"から;

function app（）{
  const {user、isauthenticated} = useauth（）;
  const loginwithredirect = useloginwithredirect（）;
  //これをリダイレクトして自動(dòng)的にログインするようにします
  // effect（（）=＆gt; {
  // if（！isauthenticated）{
  // loginwithredirect（）;
  //}
  //}、[isauthenticated、loginwithredirect]）;
  const logout =（）=＆gt;
    const baseurl = contextholder.getContext（）。baseurl;
    window.location.href = `$ {baseurl}/oauth/logout`
                            `？post_logout_redirect_uri =`
                            `$ {window.location}`;
  };
  戻る （
    <div classname="App">
      {isauthenticed？
        <div>
          <div>
            <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173916230294882.jpg" class="lazy" alt="What is Passwordless Authentication and How to Implement it ">
<p>「登録」をクリックし、メールに移動(dòng)して「アカウントをアクティブにする」をクリックします。 </p>
<p> <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173916230376786.jpg" class="lazy" alt="What is Passwordless Authentication and How to Implement it "></p>
<p>ログインしたい場(chǎng)合は、電子メールを入力して、6桁の検証コードが到著してログインするのを待つだけです。パスワードは不要、心配はありません。 </p>
<p><strong>結(jié)論</strong></p>
<p>このパスワードレス認(rèn)証ガイドが、このテクノロジーがどれほど簡(jiǎn)単であるかを理解するのに役立つことを願(yuàn)っています。 </p>
<p><strong>パスワードレス認(rèn)証FAQ（FAQ）</strong></p>
<h3>パスワードレス認(rèn)証の主な利點(diǎn)は何ですか？ </h3>
<p>パスワードレス認(rèn)証は複數(shù)の利點(diǎn)を提供します。まず、ユーザーが複雑なパスワードを覚える必要がなくなるため、ユーザーエクスペリエンスが向上します。第二に、ブルートフォース攻撃、辭書攻撃、フィッシングなどのパスワード関連の脆弱性を排除することにより、セキュリティを改善します。最後に、企業(yè)はパスワードの回復(fù)やリセットプログラムに投資する必要がなくなったため、運(yùn)用コストが削減されます。 </p>
<h3>パスワードレス認(rèn)証はどのように機(jī)能しますか？ </h3>
<p>パスワードのない認(rèn)証は、パスワード以外の要因を使用してユーザーのIDを検証します。これらの要因は、ユーザーが知っているもの（ピンなど）、ユーザーが持っているもの（モバイルデバイスなど）、またはユーザー自身（指紋など）です。システムは、1回限りのコードまたはリンクをユーザーのデバイスに送信し、ユーザーはコードまたはリンクを入力またはクリックしてアクセスを取得します。 </p>
<h3>パスワードフリー認(rèn)証は安全ですか？ </h3>
<p>はい、パスワードレス認(rèn)証は通常、従來のパスワードベースの認(rèn)証よりも安全です。パスワード関連の攻撃と脆弱性のリスクを削除します。ただし、他の安全対策と同様に、それは完全に絶対確実ではなく、最適な保護(hù)のために他の安全対策と組み合わせて使用??する必要があります。 </p>
<h3>あらゆる種類のアプリケーションにパスワードなしの認(rèn)証を使用できますか？ </h3>
<p>パスワードレス認(rèn)証は、Webアプリケーション、モバイルアプリケーション、さらにはIoTデバイスなど、さまざまなアプリケーションで使用できます。ただし、パスワードレス認(rèn)証の適用性は、アプリケーションの特定の要件とセキュリティ要件に依存します。 </p>
<h3>パスワードのない認(rèn)証を?qū)g裝することの課題は何ですか？ </h3>
<p>パスワードのない認(rèn)証を?qū)g裝すると、いくつかの課題が発生する可能性があります。一部のユーザーは、既存の認(rèn)証インフラストラクチャに大きな変更を必要とするため、ユーザーの課題に抵抗する場(chǎng)合があります。 </p>
<h3>アプリケーションにパスワードレス認(rèn)証を?qū)g裝するにはどうすればよいですか？ </h3>
<p>パスワードのない認(rèn)証の実裝には、いくつかのステップが含まれます。まず、正しい認(rèn)証係數(shù)（生體認(rèn)証やモバイルデバイスなど）を選択する必要があります。次に、この要素を認(rèn)証??プロセスに統(tǒng)合する必要があります。最後に、新しい認(rèn)証方法とその利點(diǎn)についてユーザーを教育する必要があります。 </p>
<h3>パスワードレス認(rèn)証の例は何ですか？ </h3>
<p>パスワードのない認(rèn)証の例には、生體認(rèn)証（指紋スキャンや顔認(rèn)識(shí)など）、モバイルデバイス認(rèn)証（SMSコードやプッシュ通知など）、ハードウェアトークン（セキュリティキーなど）が含まれます。 </p>
<h3>パスワードレス認(rèn)証は將來のオンラインセキュリティの將來ですか？ </h3>
<p>多くの専門家は、パスワードのない認(rèn)証が將來のオンラインセキュリティの將來であると考えています。パスワードに関連する制限とリスクがますます明らかになるにつれて、ますます多くの企業(yè)がパスワードのない認(rèn)証に頼ってセキュリティを強(qiáng)化し、ユーザーエクスペリエンスを向上させています。 </p>
<h3>他のセキュリティ対策と組み合わせて、パスワードのない認(rèn)証を使用できますか？ </h3>
<p>はい、パスワードレス認(rèn)証は、最適な保護(hù)のために他のセキュリティ対策と併せて使用することができます。これらには、暗號(hào)化、安全なコーディングプラクティス、および定期的なセキュリティ監(jiān)査が含まれる場(chǎng)合があります。 </p>
<h3>パスワードレス認(rèn)証におけるユーザーの役割は何ですか？ </h3>
<p>ユーザーは、パスワードのない認(rèn)証において重要な役割を果たします。認(rèn)証要因（モバイルデバイスや生體認(rèn)証データなど）を保護(hù)し、潛在的なセキュリティの脅威を理解する必要があります。また、自分自身を保護(hù)するための新しい認(rèn)証方法に満足する必要があります。 </p>
</div>
</div>
</div></code>