Fitbit OAuth2.0 redirect_uri 和原生反应答案

【问题标题】：Fitbit OAuth2.0 redirect_uri and react nativeFitbit OAuth2.0 redirect_uri 和原生反应
【发布时间】：2021-08-08 06:45:45
【问题描述】：

我在 react native 和我为 redirect_uri 设置的端点之间遇到了问题。对于流程，当前用户从应用程序被带到出现 fitbit 授权页面的浏览器。到目前为止，一切都很好。用户选择想要允许的权限，redirect_uri 从这里指向一个快速端点，该端点将信息保存到数据库中。在这一步之后，我想将用户重定向回 react native 应用程序以继续，而不是只显示来自移动浏览器中端点的成功消息。端点完成处理后，如何将用户重定向回应用程序？

【问题讨论】：

你试过这个包github.com/auth0/react-native-auth0吗？您从 auth0 收到的令牌应该足以授予用户访问您的 API 的权限，您不需要先重定向到您的服务器，无论您保存的任何信息在收到应用程序中的令牌后使用 POST 来完成

标签： react-native oauth-2.0 fitbit

【解决方案1】：

你问的是deep linking。

从浏览器打开您的原生应用：

您的原生应用需要定义一个 URL scheme，其他应用可以使用它来定位它。
您基于浏览器的代码需要重定向到使用您应用的scheme 的URL。

而且，很可能：

您的应用需要一个用于深层链接的侦听器。如果您不编写侦听器，您的应用将打开，但您无法将信息从基于浏览器的代码传递到应用中。

这是一个粗略的例子，作为一个起点。我鼓励您彻底阅读文档，因为深层链接比第一眼要复杂得多。 :)

反应原生

首先，为您的应用程序as explained here 创建my-excellent-app:// 方案。如果您使用Expo，这将变得更加容易。

然后，在生命周期中尽早添加监听器。就像大多数文档解释的那样——通常在App.js 或index.js 的最顶层组件中。

import { Linking } from 'react-native';
import URL from 'url-parse';

// Make sure to only add this listener once!
// Adding it more than once will trigger the handler more than once. ;)
Linking.addEventListener('url', ({ url }) => {
  const deeplink = URL(url, true);
  console.log(deeplink.query);
});

网络资料

我不确定您使用的是什么技术栈，但这个概念很简单：在服务器上执行您需要执行的任何操作，然后将浏览器重定向回您应用的自定义方案。

在 Express 中，会是这样的：

res.redirect('my-excellent-app://myCustomLink?other=data&using=UrlParamsGoesHere');

最后，还有像 Branch 这样的第三方也可以处理很多此类问题，甚至更多。

【讨论】：