在10分钟内将身份验证添加到任何网页
#javascript #网络开发人员 #编程 #authentication

今天，所有Web应用程序都需要用户登录并分享其信息以制作自己的个人资料。这有助于该应用程序可以安全地为他们提供个性化的体验。 有两种方式开发人员可以对用户进行身份验证 - 他们可以创建自己的身份验证系统，或者可以使用identity and access management service，该identity and access management service可提供安全的用户注册和具有内置登录页面的登录功能。

这篇文章演示了如何轻松地将身份验证添加到使用Authgear的任何JavaScript单页应用程序（SPA）。

为什么要authgear？

如果您在应用程序中使用authgear，就像将登录过程发送到一个主登录页面一样，类似于Google为Gmail，YouTube和其他方式发送登录过程。您可以轻松地将身份验证功能集成到您的应用中（Angular，Vue，React或任何JavaScript网站）。它通常涉及几行代码'启用多种身份验证方法，例如social logins，passwordless，biometrics logins，'biometrics logins，one-time-password (OTP)，使用SMS/WhatsApp和Multi-Whatsapp，以及Multi-WhatsApp，以及Multi-WhatsApp和Multi-WhatsApp，以及Multi-Whatsapp，以及因子身份验证（MFA）。

怎么运行的

当您的用户登录时，AuthGear会创建一个特殊 id doken ，该将发送回您的应用程序：

  1. 当用户键入您的“登录”按钮或客户端应用中的链接时，您的应用将其发送到AuthGear登录页面。您也可以customize此页面。
  2. 用户使用已设置的选项中的一个日志登录到Authgear（例如用户名/密码，社交媒体登录，无密码或电子邮件魔术链接）。
  3. 在用户进行身份验证后，您的应用要求用户的ID令牌。
  4. authgear然后将用户的ID令牌返回您的应用。

Authgear authentication flow

实施概述

SPA应用程序的身份验证的实现由两个部分组成。在第一部分中，您创建一个Authgear应用程序，选择一个记录方法并自定义登录UI页面（可选）。第二部分涵盖了Authgear’s Web SDK的使用来触发身份验证流，例如登录和登录。

第1部分：配置authgear

创建一个authgear帐户

您需要做的第一件事是创建一个Authgear account，以免费使用Authgear’s Portal。

在门户中创建应用程序

您需要创建一个应用程序，以便您知道哪些用户可以登录哪些应用程序。 Authgear应用程序是您将配置要为您正在开发的项目工作的身份验证的方式。

  • 登录Authgear Portal后，导航到“应用程序”选项卡，然后单击“添加应用程序”。
  • 选择适当的应用程序类型（单页应用程序）并为您的应用程序提供名称。

appropriate application type in Authgear

  • 单击“保存”并跳过下一个教程页面，也可以关注getting started guide进行新应用程序。

配置应用程序

创建应用程序后，您将被指向“设置”选项卡，您可以在其中配置应用程序的设置。

配置授权重定向uris

授权重定向URI 是您应用程序中的URL，在用户身份验证后，Authgear将其重定向。您应该将其设置为我们的水疗中心正在运行的http://localhost:3000。我们将在第2部分中创建它。

配置登录后重定向uris

a 登录后重定向URI 是您的应用程序中的一个URL，Authgear可以在用户从AuthGear授权服务器中登录用户后返回。对于注销URL，您需要设置相同的地址http://localhost:3000。

单击“保存”，并保留端点，客户ID 。通过SPA代码中的Authgear SDK for Web初始化连接时，您将需要它。

Example SPA App configuration

AuthGear中的每个应用程序都分配了您的应用程序代码将使用SDK调用Authgear API的字母数字，唯一的客户端ID。

配置登录方法

authgear支持广泛的身份验证方法。从“身份验证”选项卡中，您可以为用户选择登录方法。选项包括通过电子邮件，移动或社交，只需使用用户名或您指定的自定义方法即可。为简单起见，您可以选择电子邮件和无密码选项：

sign-in methods in Authgear

第2部分：将身份验证添加到您的网页

按照以下步骤创建简单的 Spa应用，并学习如何使用Authgear Web SDK将Authgear集成到您的应用程序中。您还可以在GitHub存储库上查看full-source code。

先决条件

我们开始之前，请确保您在系统中安装了node.js。如果没有，请从official website下载并安装它。

创建基本的Web服务器

在这一部分中，您将使用ExpressJS制作一个简单的网站服务器托管Spa应用程序。我们还将使用它为我们的HTML页面及其所需的任何资产（例如JavaScript，CSS等）提供服务。首先在计算机上制作新文件夹以保留应用程序的源代码（在示例中，我们称其为authgear-spa-js-login）。然后，通过运行以下命令来初始化一个新的NPM项目：

npm init -y

接下来，我们安装两个必需的软件包：

npm install express

另外，安装[nodemon](https://npmjs.org/package/nodemon)，以便可以在DEV模式下的任何代码更改上自动重新启动我们的服务器：

npm install -D nodemon

接下来，打开package.json文件并编辑脚本条目，以使start和dev命令如下：

{
  // ...
  "scripts": {
    "start": "node server.js",
    "dev": "nodemon server.js"
  },
  // ...
}

现在您可以以两种模式运行该应用程序：prod and dev。

例如，npm run devâ将使用nodemon运行该应用程序，在我们修改文件时监视更改。

创建server.js

在项目的根部创建一个新文件server.js，并用以下代码填充它：

const express = require("express");
const { join } = require("path");
const app = express();

// Serve static assets from the /public folder
app.use(express.static(join(__dirname, "public")));

// Endpoint to serve the configuration file
app.get("/authgear_config.json", (req, res) => {
  res.sendFile(join(__dirname, "authgear_config.json"));
});

// Serve the index page for all other requests
app.get("/*", (_, res) => {
  res.sendFile(join(__dirname, "index.html"));
});

// Listen on port 3000
app.listen(3000, () => console.log("Application running on port 3000"));

创建一个基本的HTML页面

在项目的根部创建一个index.html文件，并将以下内容添加到创建的文件：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Authgear SPA SDK Sample</title>
    <link rel="stylesheet" type="text/css" href="/css/main.css" />
  </head>

  <body>
    <h2>SPA Authentication Sample</h2>
    <p>Welcome to our page!</p>
    <button id="btn-login" disabled="true" onclick="login()">Log in</button>
    <button id="btn-logout" disabled="true" onclick="logout()">Log out</button>
    <script src="js/app.js"></script>
    <script src="https://unpkg.com/@authgear/web@2.2.0/dist/authgear-web.iife.js"></script>
  </body>
</html>

为了使演示简单，我们不使用诸如Webpack之类的软件包管理器，我们将使用IIFE（立即启用的函数表达式）捆绑包从Authgear的CDN中检索Authgear Web SDK。我们可以直接在HTML中引用脚本：

<script src="https://unpkg.com/@authgear/web@2.2.0/dist/authgear-web.iife.js"></script>

您可以安装Authgear Web SDK作为应用程序的依赖性，如果您要构建React或React Antive Apps，则很有用。查看如何install the package。

创建一个main.css文件

在项目root文件夹中创建一个名为public文件夹的新文件夹，并在public文件夹中创建另一个名为css的文件夹。在其中添加一个名为main.css的新文件。这将用于确定如何在主页上隐藏的登录和登录按钮元素，具体取决于用户是否经过身份验证。

打开新创建的public/css/main.css文件并添加以下CSS：

.hidden {
    display: none;
}

label {
    margin-bottom: 10px;
    display: block;
}

创建HTML文件并应用CSS样式后，请参阅我们通过运行npm run dev并在http://localhost:3000访问它的页面。

Authgear SPA Authentication custom apge

创建一个app.js文件

要在页面上添加一些操作，我们在称为js的public文件夹中创建一个新目录，并在其中添加一个名为app.js的新文件。复制并粘贴以下读取authgear_config.json文件Authgear应用特定值（endpoint和clientId）的JS代码，使用fetchAuthConfig函数。此外，它配置了一个新的authgear客户端，并定义登录和注销逻辑：

let authgearClient = null;

const fetchAuthConfig = () => fetch("/authgear_config.json");

const configureClient = async () => {
    const response = await fetchAuthConfig();
    const config = await response.json();
    authgearClient = window.authgear.default;

    await authgearClient.configure({
        endpoint: config.endpoint,
        clientID: config.clientID,
        sessionType: "refresh_token",
    }).then(
        () => {
            console.log("Authgear client successfully configured!");
        },
        (err) => {
            console.log("Failed to configure Authgear");
        }
    );
};

const login = async () => {
    await authgearClient
        .startAuthentication({
            redirectURI: window.location.origin,
            prompt: "login",
        })
        .then(
            () => {
                console.log("Logged in!");
            },
            (err) => {
                console.log("Log in failed", err);
            }
        );
};

const logout = () => {
    authgearClient
    .logout({
      redirectURI: window.location.origin,
    })
    .then(
      () => {
        console.log("Logged out successfully");
      },
      (err) => {
        console.log("Failed to logout");
      }
    );
};

window.onload = async () => {
    await configureClient();
    updateUI();

    const query = window.location.search;
    if (query.includes("code=")) {

        updateUI();

        window.history.replaceState({}, document.title, "/");
    }
}

const updateUI = async () => {
    const isAuthenticated = authgearClient.sessionState === "AUTHENTICATED";

    document.getElementById("btn-logout").disabled = !isAuthenticated;
    document.getElementById("btn-login").disabled = isAuthenticated;
};

了解整个图片

让上一节中的app.js代码分解，并了解Authgear如何实现身份验证：

配置authgear客户端

fetchAuthConfig：首先，此函数向/authgear_config.json端点提出了请求，我们在server.js中展示了从authgear_config.jsonfile获取authgear应用程序设置值。

configureClient：一旦我们从authgear_config.json文件中检索authgear客户端的配置信息，我们就使用这些设置设置了authgear客户端。它还将消息记录到控制台，并告知配置是否成功。

登录流量

login：登录 '的login函数先前在html页面中定义了。它通过调用authgearClient.startAuthentication authgear的功能执行登录操作。它将用户重定向到AUHTHGEAR登录页面。用户成功登录后，将将它们重定向回我们在redirectURI中设置的同一页面。运行该项目，然后单击登录按钮。您应该被带到为应用程序配置的 authgear登录页面。继续并使用电子邮件创建新用户或登录（我们在第一部分指定了无密码电子邮件登录方法）。当您尝试通过电子邮件登录时，您应该收到一个magic link到您的电子邮件框中以确认登录操作。

Image description

Image description

Image description

成功身份验证后，您将被重定向到以前的页面。

注销流

logout：此函数将用户记录出来，并将其重定向回原始页面（at http://localhost:3000）。它使用authgear的kou​​de33函数并将消息记录到指示操作结果的控制台。

更新UI

window.onload：这是页面加载时运行的函数。它配置了authgear客户端并更新UI。如果页面的URL包含一个“代码=”，则表示用户已进行身份验证（code查询将从AuthGear Server接收），则它将再次更新UI并从URL中删除“ code =”。

。

评估身份验证状态

updateUI：此功能根据用户是否经过身份验证，更新登录和注销按钮的状态。在AuthGear中，您可以检查用户是否使用sessionState属性登录。如果用户经过身份验证，我们禁用登录按钮并启用注销按钮，反之亦然，如果没有认证。

概括

在整个帖子中，您了解了如何在10分钟内使用AuthGear快速在任何JavaScript网页上添加无密码的身份验证。例如，您可以使用AuthGear进行更多操作，例如，您可以通过SDK获取current user info，或者如果您需要从网页中安全地通信到后端API，则可以将access token包括在应用程序服务器的HTTP请求中。

相关资源

建议的内容

社区

Join the Authgear Community on Discord

°°Follow on Twitter

2°m Ask questions

¶oâCheck out open-source SDKs

关于作者

请访问我的博客：âwww.iambobur.com