在开发 web 应用的过程中,社交登录已经成为了必备功能,因为它能够方便用户快速登录应用,而不用填写复杂的注册表格,从而提升用户体验。Auth0 是一种通用的身份验证和授权管理服务,可以添加各种社交登录连接,包括自定义的。
在这篇文章中,我们将介绍如何使用 Serverless Framework 部署 Auth0 自定义社交连接。我们将使用 AWS Lambda 和 API 网关作为 serverless 的主要组件。
步骤1: 创建 AWS Lambda 函数
第一步是创建一个 AWS Lambda 函数作为我们的自定义社交连接的端点。在这个函数中,我们将使用 Auth0 的 JavaScript SDK 来执行一些验证过程。
我们将使用 Serverless Framework 来部署 Lambda 函数并配置与之关联的 API 网关。在终端中输入以下命令来创建一个新的 serverless 应用程序:
sls create --template aws-nodejs --path auth0-social-connection cd auth0-social-connection
这将创建一个新的 serverless 应用程序,并将我们导航到应用程序的目录中。
接下来,打开 serverless.yml
文件并添加以下配置:
-- -------------------- ---- ------- -------- ----------------------- --------- ----- --- -------- ---------- ------ --- ------- --------- ---------- ------ -------- -------------
这个配置告诉 serverless 框架它将使用 AWS Lambda 作为 provider,运行时环境是 nodejs12.x ,它将创建一个名为 hello
的 Lambda 函数,这个函数的入口是 handler.hello
。
接下来,我们需要在 handler.js
文件中创建函数,如下所示:
-- -------------------- ---- ------- ----- ----- - ----------------- ----- ----------- - --- ------- ------- -------------------- --------- ----------------------- ------------- --------------------------- --------- ---------------------------------------------- ------ ----------------- ------------------- --- -------------------- - ----- ------- -------- -- - ------ - ----------- ---- ----- ---------------- -------- ------ ------- -- -- --
这个函数导入了 Auth0 的 JavaScript SDK,我们传递了 domain
、clientId
、clientSecret
、audience
和 scope
参数,这些参数是为了让我们的应用程序能够使用 Auth0 API。函数返回 "Hello World!" 作为响应主体。
步骤2: 添加自定义社交连接逻辑
现在我们已经成功创建了 serverless 应用程序并创建了一个 Lambda 函数来响应请求。接下来,我们将添加与 Auth0 相关的功能,这将是我们添加自定义社交连接的关键。
首先,我们需要创建一个 Auth0 应用程序,并为它启用 API。在 Auth0 控制台上创建一个新的应用程序,并为其启用 API。在“API”,“接口”的选项卡上选中“Enable APIs”选项,然后选择 Auth0 Management API 。
接下来,我们需要创建一个自定义社交连接,在 Auth0 应用程序中包含这个连接。在 Auth0 控制台上,导航到“Connections”,然后打开“社交”选项卡。这里我们可以看到已经有一些默认连接,如 Facebook、Google 等。我们将添加自定义的连接方式。
在左下角,可以找到 New Connection
按钮,点击后会出现一个选项:
官方到 Auth0 的支持社交连接如果您希望社交连接能够得到官方支持,请使用这个选项。
OAuth 类型如果您的社交应用程序中使用 OAuth 授权协议,请选择此选项,您需要提供一个托管在您的域名下的授权 URL。
OpenID Connect 类型 OpenID 连接是一种在现代 Web 应用中广泛使用的身份验证协议。
自定义 选项如果您希望使用自己的协议,请选择此选项。
我们使用自定义选项,输入我们的社交登录接口和一些其他信息:
-- -------------------- ---- ------- - ------- ----------------------- ----------- ----------------------- ------------------ - ---------------------- -- ---------- - ----------- --------------------- --------------- ------------------------- ------------------- ------------------------------------------- ----------- --------------------------------------- -------------- ------------------------------------------ -------------- -------------------------------------------------------------- - -
在这个例子中,我们选择了自定义的选项,并输入了我们的社交登录接口以及一些其他的信息。请注意,我们需要将 callbackURL
设置为一个我们将要创建的 API 网关的端点,这个端点将负责接受重定向请求。
接下来,我们需要在我们的 Lambda 函数中添加一个新的逻辑,这个逻辑将监听 Auth0 发出的请求,并将以适当的方式响应它:
-- -------------------- ---- ------- ----- --- - --------------- ------------------- - ----- ------- -------- -- - ----- -- - -------------------- ------------ -- ---------- - ------ - ----------- ---- ----- ---------------- -------- -------- -- -- - ------ - ----------- ---- -------- - --------- --------------------------------------------- - -------- -- ----- -- -- --
在这个例子中,我们利用 nodejs 内置的 url 模块解析了事件中所接收到的事件对象并解析出 code
和 state
等参数。然后,我们重定向到我们的社交登录页面。这个社交登录页面应该是这样的:
https://my-custom-provider.com/login?state={state}&client_id={clientId}&redirect_uri={callbackURL}&response_type=code
这个 URL 应该重定向到用户授权页面,用户将在这个页面上验证他们的身份并授权你的应用使用他们的信息,然后在他们被成功验证后,my-custom
将返回到 Auth0 应用程序,并提供一个授权代码。
我们将监听这个重定向请求,并使用我们的 Lambda 函数返回正确的响应。然后,Auth0 将根据我们的代码交换一个 token,并使用上面列出的 URL 来获取用户信息。
步骤3: 部署 Lambda 函数和 API 网关
到目前为止,我们已经为我们的 serverless 应用程序配置了一个 Lamba 函数,并添加了自定义社交连接的逻辑。接下来,我们将使用 Serverless Framework 部署这个应用程序,并将它关联到一个 API 网关。
首先,我们需要使用以下命令部署函数:
sls deploy
这个命令将在 AWS 上创建一个新的 Lambda 函数,并为其配置一个名为 hello
的端点。使用以下命令获取输出 JSON 是完整路径:
sls info
在部署这个函数之后,我们需要创建一个新的 API 网关,并将 Lambda 函数与它关联。我们需要打开 serverless.yml
文件并添加以下配置:
-- -------------------- ---- ------- -------- ----------------------- --------- ----- --- -------- ---------- ------ --- ------- --------- ---------- ------ -------- ------------- ------- - ----- ----- ----- ------- --- ----- -------- ------------ ------- - ----- ----- ------------- ------- --- ------------ ------------ -------- - ----------------------- - ------------------------- ------- ------------------------ ------ - ----- ------------- ----------- ---------------- ---------------- -------------------- --------- -- ------ ------------ -------------------- ----
这个配置告诉 serverless 框架如何创建一个新的 API 网关和一个与之关联的 Lambda 函数。我们用 hello
路径来测试 Lambda 函数的触发器;使用 auth/callback
路径为我们的社交连接设置重定向请求的回调 URL;并支持桶的二进制对象语法支持。请注意,我们将 auth/callback
设置为 integration: lambda-proxy
,这意味着我们将使用 API 网关作为 Lambda 的代理。
我们使用 serverless-domain-manager 插件来配置自定义域名。只需要将 YOUR_DOMAIN_NAME
和 YOUR_SSL_CERTIFICATE
更改为您自己的域名和 SSL 证书即可。
最后,我们使用以下命令部署 serverless 应用程序并关联它的 Lambda 函数和 API 网关:
sls deploy --verbose
这个命令将读取你的 serverless.yml 文件中的配置,使用 AWS CloudFormation 服务,找到你应用程序所需的资源,然后批量创建和组织这些资源。使用 CloudFormation 可以追踪所有的部署和更改。
结论
在这篇文章中,我们介绍了如何使用 Serverless Framework 部署 Auth0 自定义社交连接,以便在 web 应用程序中提供更好的用户体验。我们详细地解释了每个步骤,并提供了相应的代码示例。通过这篇文章,你已经了解了 AWS Lambda、Auth0 SDK、API 网关等 serverless 相关的技术,并建立起了如何将它们应用到特定场景下的能力。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/67065467d91dce0dc85bd6f1