如何让react-native-inappbrowser-reborn在成功登录Facebook后触发成功

Question

我正在尝试按照以下文档设置 Facebook 登录的手动流程：https ://developers.facebook.com/docs/facebook-login/manually-build-a-login-flow/

我的测试 Facebook 应用程序按预期工作，即我可以使用私人网络浏览器窗口正常登录。我使用的网址是：

https://facebook.com/v3.3/dialog/oauth?client_id=<app_id>&display=popup&response_type=token&redirect_uri=https://www.facebook.com/connect/login_success.html

现在，在我的 React-Native 应用程序中，我正在使用iOS 上的react-native-inappbrowser-reborn演示SFAuthenticationSession。根据他们的文档（位于https://www.npmjs.com/package/react-native-inappbrowser-reborn），我正在执行以下操作：

const redirectUri = "https://www.facebook.com/connect/login_success.html"
const url = "https://facebook.com/v3.3/dialog/oauth?client_id="+appId+"&display=popup&response_type=token&redirect_uri=https://www.facebook.com/connect/login_success.html"

InAppBrowser.isAvailable()
.then(() => {
InAppBrowser.openAuth(url, redirectUri, {
    // iOS Properties
    dismissButtonStyle: 'cancel',
    // Android Properties
    showTitle: false,
    enableUrlBarHiding: true,
    enableDefaultShare: true,
})
.then((response) => {
    // Only gets to this point if user explicitly cancels.
    // So this does not trigger upon successful login.
})
// catch handlers follow

使用上述内容，我的应用程序可以正确打开应用程序内浏览器，并且我可以使用我的测试应用程序的测试用户正常登录。但成功登录后，我不会被重定向回.then完成处理程序。它只是停留在应用程序内浏览器视图中，我看到来自 Facebook 的消息与使用网络浏览器登录时看到的消息相同。它会显示类似“成功。请像对待密码一样对待网址”或类似内容。

redirectUri我可能在这里遗漏了一些东西，但我认为作为参数传递的目的openAuth是为了在重定向到该 URI 时触发完成处理程序。

问题：登录成功后如何重定向回完成处理程序？

Answer 1

我认为您已经有了解决方案，但认为它可能对其面临此问题的其他人有用。如果到目前为止您还没有解决方案，请按照我的说明操作：

\n

您无法使用深层链接直接重定向回您的应用程序，因为 Facebook 不会调用“像 myapplicationname://mycustompath\xc2\xb4”这样的链接。只能使用 https 协议 (https://...) 调用链接。

\n

我建议您使用的解决方案是使用您自己的 API 进行重定向（Facebook -> 您的 API -> 深层链接重定向）。在说明的末尾，您将了解为什么大多数现实世界的应用程序都需要这样做。

\n

从您的react-native应用程序开始，通过重定向到您的应用程序调用Facebook的授权端点，并将您的应用程序的全局深层链接设置为重定向uri。

\n

    InAppBrowser.close();\n    InAppBrowser.openAuth("https://graph.facebook.com/oauth/authorize?client_id=YOURCLIENTID&redirect_uri=https://YOURDOMAIN:PORT/auth/facebook", "{YOURAPPSDEEPLINKNAME}://{SOMEPATHYOUWANTTOEND}")\n    .then((response) => { \n         handleAuthorized(response, LOGINTYPE.FACEBOOK);\n    });\n

\n

现在，登录后，您将被重定向到您的 API，并使用授权代码令牌作为查询参数（例如https://YOURDOMAIN:PORT/auth/facebook?code=AVERYLONGCODESENTBYFACEBOOK）

\n

使用查询参数中的此代码令牌，您可以进行另一个 API 调用来获取用户的 access_token

\n

{得到}： https://graph.facebook.com/v15.0/oauth/access_token?client_id=YOUR_CLIENT_ID&redirect_uri=https://YOURDOMAIN:PORT/auth/facebook&client_secret=YOUR_CLIENT_SECRET&code=AVERYLONGCODESENTBYFACEBOOK

\n

Facebook 的 API 将向您发送 JSON 格式的答案，其中包含 access_token。\n您可以使用用户的访问令牌进行另一个调用，以获取 userId 和用户名

\n

{得到}：https://graph.facebook.com/me?access_token=ACCESS_TOKEN_SENT_BY_FACEBOOK_IN_PREVIOUS_GET_REQUEST。

\n

如果您需要该用户的电子邮件地址，则必须再次拨打电话。确保您已在 Facebook 开发者门户上设置读取应用程序电子邮件地址的权限。\n以下请求将返回用户的 ID、姓名和电子邮件地址

\n

{得到}：https://graph.facebook.com/USERIDFROMPREVIOUSREQUEST?fields=id,name,email&access_token=ACCESSTOKEN

\n

我认为您希望将所有这些信息保存到数据库并创建一个会话以保持用户登录状态，因此描述的所有请求在实际应用程序中对您有用。

\n

完成所有后端工作后，您就可以使用深层链接进行重定向了。为此，请设置一个元标记以将 inappbrowser 重定向到您的应用程序：

\n

<meta http-equiv="refresh" content="0; URL={YOURAPPSDEEPLINKNAME}://{SOMEPATHYOUWANTTOEND}" />

\n