跳过登录页面，直接跳转到企业登录¶

您可以使用 Authany 的 x_oauth_provider_alias 参数，在不显示任何 AuthUI 页面的情况下为应用添加社交/企业登录。为此，您必须在 Authany 管理台中为项目启用 仅社交/企业登录 登录方式。

在这篇指南中，您将学习如何使用 x_oauth_provider_alias 参数跳过 AuthUI，直接将用户带到社交/企业登录提供方的授权页面。

前提条件¶

Authany 账号。可以在这里免费创建。

本指南将实现的内容¶

在本指南中，我们将逐步介绍如何为 Authany 应用仅添加社交/企业登录方式。
我们将使用 Authany 的 React Native SDK 来设置 x_oauth_provider_alias 参数，并通过一个示例 Express 应用展示如何在不使用 SDK 的情况下使用 x_oauth_provider_alias。

上面的时序图展示了使用 x_oauth_provider_alias 跳过 AuthUI 的流程。

首先，当用户点击登录按钮时，您的应用会调用 Authany 项目的 authorize 端点，并附加 x_oauth_provider_alias 参数。

接下来，Authany 服务器收到该调用后，会重定向到第三方 OAuth（社交/企业登录）提供方的授权服务器。随后，系统会向用户展示该 OAuth 提供方的登录/授权页面，供其完成授权。授权完成后，该 OAuth 提供方会向 Authany 返回授权码。

接下来，Authany 会用授权码换取访问令牌、刷新令牌和 ID 令牌，然后开始创建新用户或让已有用户登录。

后续流程与常规流程相同：将授权码发送给客户端应用，客户端应用再用授权码换取访问令牌、刷新令牌和 ID 令牌。

第一步是将您要使用的社交/企业登录提供方添加到 Authany 项目中。在本例中，我们将添加 Facebook。

要添加新的提供方，请登录 Authany 管理台，选择您的项目，然后进入 身份验证 > 社交/企业登录。

接下来，点击编辑按钮，输入该社交/企业登录提供方的 Client ID 和 Client Secret，然后点击保存。同时请记下 Alias 的值，后续步骤会用到。

关于如何获取 Facebook 登录的 Client ID 和 Client Secret，请参阅这篇指南。

要让 Authany 跳过 AuthUI，关键的一步是启用仅社交/企业登录方式。这样设置后，Authany 就会知道您的应用只会使用第三方 OAuth 提供方进行登录。因此，系统可以跳过登录、注册或登录方式选择的 AuthUI 页面，直接跳转到该 OAuth 提供方的授权页面。

要启用仅社交/企业登录，请进入 身份验证 > 登录方式，然后选择 仅社交/企业登录 登录方式并点击保存。

第 3 步：设置 x_oauth_provider_alias 参数¶

完成上述设置后，您的应用就可以只使用社交/企业登录了。此时，您可以通过带有 x_oauth_provider_alias 参数的 Authany authorize 端点发起授权请求，从而跳过 AuthUI。

我们将介绍两种实现方式：第一种是使用 SDK，第二种是将 x_oauth_provider_alias 作为 URL 查询参数传递。

1. 使用 Authany SDK 添加 x_oauth_provider_alias¶

下面的示例展示了如何使用 Authany React Native SDK 添加 x_oauth_provider_alias：

authgear
  .configure({
    clientID: '<YOUR_CLIENT_ID>',
    endpoint: '<YOUR_AUTHGEAR_PROJECT_ENDPOINT>',
  })
  .then(() => {
    authgear
      .authenticate({
        redirectURI: 'com.reactnativeauth://host/path',
        oauthProviderAlias: 'facebook',
      })
      .then(({userInfo}) => {
        Alert.alert('Login successful, welcome ' + userInfo.email);
      });
  });

上述方式的关键在于，在 Authany SDK 的 authenticate() 方法中包含了 oauthProviderAlias: 'facebook'。只要按照第 1 步正确配置了社交/企业登录提供方，并且启用了 仅社交/企业登录 登录方式，该参数就会告诉 Authany 直接重定向到该 OAuth 提供方。

请注意，oauthProviderAlias 的值必须是您在第 1 步中为社交/企业登录提供方配置的 Alias。

2. 将 x_oauth_provider_alias 添加到授权 URL¶

如果您没有使用 Authany SDK，可以手动将 x_oauth_provider_alias 参数添加到 Authany 的授权端点。

下面的示例展示了如何将 x_oauth_provider_alias 添加到 Authany 的授权端点：

app.get("/login", (req, res) => {
  const url = new URL("<YOUR_AUTHGEAR_PROJECT_ENDPOINT>/oauth2/authorize");
  url.searchParams.set('client_id', config.client.id);
  url.searchParams.set('redirect_uri', "http://localhost:3000");
  url.searchParams.set('scope', "openid offline_access");
  url.searchParams.set('x_oauth_provider_alias', 'facebook')

  res.redirect(url);

});

上面的代码会将 &x_oauth_provider_alias=facebook 附加到授权 URL 中。