跳到主要内容
· 阅读需 1 分钟
Logto team
The better identity infrastructure for developers
给我们的新朋友:

Logto 是一个为现代应用和 SaaS 产品设计的 Auth0 替代方案。它提供 Cloud开源 服务,帮助你快速启动身份和管理 (IAM) 系统。享受认证 (Authentication)、授权 (Authorization) 和多租户管理 一体化

我们建议从 Logto Cloud 上的免费开发租户开始。这可以让你轻松探索所有功能。

在本文中,我们将介绍使用 VueLogto 快速构建 Azure AD 登录体验(用户认证 (Authentication))的步骤。

先决条件

  • 一个正在运行的 Logto 实例。查看 介绍页面 以开始。
  • Vue 的基本知识。
  • 一个可用的 Azure AD 账户。

在 Logto 中创建一个应用程序

Logto 基于 OpenID Connect (OIDC) 认证 (Authentication) 和 OAuth 2.0 授权 (Authorization)。它支持跨多个应用程序的联合身份管理,通常称为单点登录 (SSO)。

要创建你的 单页应用 应用程序,只需按照以下步骤操作:

  1. 打开 Logto Console。在“开始使用”部分,点击“查看全部”链接以打开应用程序框架列表。或者,你可以导航到 Logto Console > Applications,然后点击“创建应用程序”按钮。 开始使用
  2. 在打开的模态窗口中,点击“单页应用”部分,或使用左侧的快速过滤复选框过滤所有可用的“单页应用”框架。点击 "Vue" 框架卡片以开始创建你的应用程序。 框架
  3. 输入应用程序名称,例如“Bookstore”,然后点击“创建应用程序”。

🎉 太棒了!你刚刚在 Logto 中创建了你的第一个应用程序。你将看到一个祝贺页面,其中包含详细的集成指南。按照指南查看你的应用程序中的体验将会是什么样的。

集成 Vue SDK

提示:
  • Logto Vue SDK 是使用组合式 API 构建的,并利用了可组合函数,因此它仅兼容 Vue 3。
  • 教程视频可在我们的 YouTube 频道 上观看。
  • 完整的示例项目可在我们的 SDK 仓库 中找到。

安装

npm i @logto/vue

初始化 LogtoClient

导入并使用 createLogto 来安装 Logto 插件:

main.ts
import { createLogto, LogtoConfig } from '@logto/vue';
import { createApp } from 'vue';
import App from './App.vue';

const config: LogtoConfig = {
endpoint: '<your-logto-endpoint>',
appId: '<your-application-id>',
};

const app = createApp(App);

app.use(createLogto, config);
app.mount('#app');

配置重定向 URI

在我们深入细节之前,这里是终端用户体验的快速概述。登录过程可以简化如下:

  1. 你的应用调用登录方法。
  2. 用户被重定向到 Logto 登录页面。对于原生应用,将打开系统浏览器。
  3. 用户登录并被重定向回你的应用(配置为重定向 URI)。

关于基于重定向的登录

  1. 此认证 (Authentication) 过程遵循 OpenID Connect (OIDC) 协议,Logto 强制执行严格的安全措施以保护用户登录。
  2. 如果你有多个应用程序,可以使用相同的身份提供商 (IdP)(日志 (Logto))。一旦用户登录到一个应用程序,当用户访问另一个应用程序时,Logto 将自动完成登录过程。

要了解有关基于重定向的登录的原理和好处的更多信息,请参阅 Logto 登录体验解释


备注:

在以下代码片段中,我们假设你的应用程序运行在 http://localhost:3000/

配置重定向 URI

切换到 Logto Console 的应用详情页面。添加一个重定向 URI http://localhost:3000/callback

Logto Console 中的重定向 URI

就像登录一样,用户应该被重定向到 Logto 以注销共享会话。完成后,最好将用户重定向回你的网站。例如,添加 http://localhost:3000/ 作为注销后重定向 URI 部分。

然后点击“保存”以保存更改。

处理重定向

用户从 Logto 重定向回你的应用后,还有一些事情需要处理。让我们妥善处理它。

首先,让我们创建一个回调页面:

views/CallbackView.vue
import { useHandleSignInCallback } from '@logto/vue';
import router from '@/router';

const { isLoading } = useHandleSignInCallback(() => {
// 完成后执行某些操作,例如重定向到主页
});
<template>
<!-- 当正在处理中 -->
<p v-if="isLoading">正在重定向...</p>
</template>

将以下代码插入到不需要认证 (Authentication) 的 /callback 路由中:

router/index.ts
// 假设使用 vue-router
const router = createRouter({
routes: [
{
path: '/callback',
name: 'callback',
component: CallbackView,
},
],
});

实现登录和登出

我们提供了两个组合式函数 useHandleSignInCallback()useLogto() ,可以帮助你轻松管理认证 (Authentication) 流程。

备注:

在调用 .signIn() 之前,请确保你已在管理控制台中正确配置了重定向 URI。

views/HomeView.vue
import { useLogto } from '@logto/vue';

const { signIn, signOut, isAuthenticated } = useLogto();

const onClickSignIn = () => signIn('http://localhost:3000/callback');
const onClickSignOut = () => signOut('http://localhost:3000');
<template>
<button v-if="!isAuthenticated" @click="onClickSignIn">登录</button>
<button v-else @click="onClickSignOut">登出</button>
</template>

调用 .signOut() 将清除内存和 localStorage 中所有的 Logto 数据(如果存在)。

检查点:测试你的应用程序

现在,你可以测试你的应用程序:

  1. 运行你的应用程序,你将看到登录按钮。
  2. 点击登录按钮,SDK 将初始化登录过程并将你重定向到 Logto 登录页面。
  3. 登录后,你将被重定向回你的应用程序,并看到登出按钮。
  4. 点击登出按钮以清除令牌存储并登出。

添加 Azure AD 连接器

要实现快速登录并提高用户转化率,请将 Vue 作为身份提供商 (IdP) 进行连接。Logto 社交连接器可以帮助你在几分钟内通过允许输入多个参数来建立此连接。

要添加社交连接器,只需按照以下步骤操作:

  1. 导航到 Console > Connectors > Social Connectors
  2. 点击“添加社交连接器”并选择“Azure AD”。
  3. 按照 README 指南完成必填字段并自定义设置。

Connector tab

备注:

如果你正在按照现场连接器指南进行操作,可以跳过下一部分。

设置 Azure AD

在 Azure 门户中设置 Microsoft Azure AD

  • 访问 Azure 门户 并使用你的 Azure 账户登录。你需要有一个有效的订阅才能访问 Microsoft Azure AD。
  • 点击他们提供的服务中的 Azure Active Directory,然后从左侧菜单中点击 App Registrations
  • 点击顶部的 New Registration,输入描述,选择你的 访问类型 并添加你的 Redirect URI,登录后将用户重定向到应用程序。在我们的例子中,这将是 ${your_logto_endpoint}/callback/${connector_id}。例如 https://foo.logto.app/callback/${connector_id}connector_id 也可以在 Logto 管理控制台连接器详情页面的顶部栏找到。你可以在配置部分复制 Callback URI
  • 选择 Web 作为平台。

在 Logto 中填写配置

名称类型
clientIdstring
clientSecretstring
tenantIdstring
cloudInstancestring

客户端 ID

你可以在 Azure 门户中新创建的应用程序的 Overview 部分找到 Application (client) ID

客户端密钥

  • 在你新创建的应用程序中,点击 Certificates & Secrets 以获取客户端密钥,并从顶部点击 New client secret
  • 输入描述和过期时间。
  • 这将只显示你的客户端密钥一次。将 value 填写到 Logto 连接器配置中,并将其保存到安全位置。

云实例

通常是 https://login.microsoftonline.com/。有关更多信息,请参阅 Azure AD 认证端点

租户 ID

Logto 将使用此字段构建授权端点。此值取决于你在 Azure 门户中创建应用程序时选择的 访问类型

  • 如果你选择 仅此组织目录中的账户 作为访问类型,则需要输入你的 {TenantID}。你可以在 Azure Active Directory 的 Overview 部分找到租户 ID。
  • 如果你选择 任何组织目录中的账户 作为访问类型,则需要输入 organizations
  • 如果你选择 任何组织目录或个人 Microsoft 账户中的账户 作为访问类型,则需要输入 common
  • 如果你选择 仅个人 Microsoft 账户 作为访问类型,则需要输入 consumers

保存你的配置

仔细检查你是否在 Logto 连接器配置区域填写了必要的值。点击“保存并完成”(或“保存更改”),Azure AD 连接器现在应该可用了。

在登录体验中启用 Azure AD 连接器

一旦你成功创建了一个社交连接器,你可以在登录体验中将其启用为“继续使用 Azure AD”按钮。

  1. 导航到 Console > 登录体验 > 注册和登录
  2. (可选)如果只需要社交登录,选择“无”作为注册标识符。
  3. 将配置好的 Azure AD 连接器添加到“社交登录”部分。

登录体验选项卡

测试和验证

返回到你的 Vue 应用。你现在应该可以使用 Azure AD 登录了。享受吧!

拓展阅读

终端用户流程:Logto 提供开箱即用的认证 (Authentication) 流程,包括多因素认证 (MFA) 和企业单点登录 (SSO),以及强大的 API,用于灵活实现账户设置、安全验证和多租户体验。

授权 (Authorization):授权 (Authorization) 定义了用户在被认证 (Authentication) 后可以执行的操作或访问的资源。探索如何保护你的 API 以用于原生和单页应用程序,并实现基于角色的访问控制 (RBAC)。

组织 (Organizations):在多租户 SaaS 和 B2B 应用中特别有效,组织功能支持租户创建、成员管理、组织级 RBAC 和即时供应。

客户 IAM 系列:我们关于客户(或消费者)身份和访问管理的系列博客文章,从 101 到高级主题及更深入的内容。