用户接受 Oauth2 权限后重定向回应用程序

Question

背景

我正在使用 Lyft API 通过他们的 3 条 Oauth2 流程对用户进行身份验证。我已Deep Linking按照此处的文档添加到我的应用程序中。

当我的应用程序打开时，它会立即在 Safari 中加载 Lyft 身份验证页面。在他们接受我请求的权限后，Safari 尝试重定向到我在Lyft Developer 的开发者帐户中设置的 URL

这里的问题是，当用户授予我的应用程序权限时，我需要用户返回我的应用程序，并提供 Lyft 给出的响应。

我试过的

深层链接

lyftauth://

我可以在 Safari 中输入该链接，当我在打电话时，如果安装了该应用程序，它就会打开我的应用程序。我尝试将该链接添加为 Lyft 开发人员页面上的重定向 URL，但它不接受该 URL 格式。

所以我确信我必须给开发者帐户页面一个 URL 来重定向，我知道它会尝试重定向到那个 URL，我知道我不能使用正确的 URL 来让我的应用程序重新打开。

反应本机 Oauth 库

我尝试使用库react-native-oauth。使用这个库时，我发现它没有按预期工作。在 githu.com 上打开了许多问题，其中很多甚至没有回应。我试图为库和编辑代码来为我工作，但无论如何我最终都会在一个不存在的对象上调用一个方法。特别是一种称为authorize.

原生 Xcode 应用程序

我使用 Swift 构建了一个 Xcode 项目并安装了Lyft SDKcocoapods。我能够使用此 SDK 使用 API。由于不断缺少依赖项，我无法将 React Native 合并到现有的 Swift 项目中。

代码示例

使用上面提到的链接文档，我将此代码添加到我的 App Delegate 文件中，

AppDelegate.m

#import "AppDelegate.h"

#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>
#import <React/RCTLinkingManager.h>

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application
            openURL:(NSURL *)url
            options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options
{
  return [RCTLinkingManager application:application openURL:url options:options];
}

- (BOOL)application:(UIApplication *)application continueUserActivity:(NSUserActivity *)userActivity
 restorationHandler:(void (^)(NSArray * _Nullable))restorationHandler
{
  return [RCTLinkingManager application:application
                   continueUserActivity:userActivity
                     restorationHandler:restorationHandler];
}

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  NSURL *jsCodeLocation;

  jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];

  RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                      moduleName:@"Lyft"
                                               initialProperties:nil
                                                   launchOptions:launchOptions];
  rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];

  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
  UIViewController *rootViewController = [UIViewController new];
  rootViewController.view = rootView;
  self.window.rootViewController = rootViewController;
  [self.window makeKeyAndVisible];
  return YES;
}

@end

然后我进入 info.plist 并添加了一个链接来打开应用程序，

我正在导入Linking我的 React Native 组件，

import React, { Component } from 'react';
import {
  Linking,
} from 'react-native';

我将 React Native 文档中的代码添加到 React Native 组件中，

const url = 'https://api.lyft.com/oauth/authorize?client_id=PbUe5NjrXqQP&scope=public%20profile%20rides.read%20rides.request%20offline&state=true&response_type=code'

class App extends Component {
      constructor(props) {
        super(props);
        this.state = {

        }
        this._handleOpenURL = this._handleOpenURL.bind(this);
      }

      componentDidMount() {
        Linking.openURL(url);
        Linking.addEventListener('url', this._handleOpenURL);
      }

      componentWillUnmount() {
        Linking.removeEventListener('url', this._handleOpenURL);
      }

      _handleOpenURL(event) {
        console.log(event.url);
        console.log('WE ARE TRYING TO CALL THIS FUNCTION AT THIS POINT');
      }

      render() {
        return (
          ...
        );
      }

}
export default App;

题

Oauth2当API您使用的应用程序没有专门为您处理时，使用 React Native处理重定向回您的应用程序的最常见方法是什么？

Answer 1

由于这是一个非常难以克服的问题，而且这个问题并没有受到很多关注，我怀疑将来会有其他人会欣赏我如何克服这个问题的例子。

问题

在用户使用 Lyft API 3 支路 Oauth 流程接受权限后处理重定向。

解决方案

示例解决方案回购在这里

为了解决这个问题，我使用了 React Native 支持的 Deep Linking。我还必须在 IOS 和 Android 应用程序中设置链接。这些链接需要与 Lyft 开发者页面中的重定向 URL 相同，这样当链接在装有应用程序的移动设备上被触发时，应用程序才能重新打开。这可以按照以下方式完成，

1. 设置深度链接。可以在此处找到有关如何将链接添加到您的应用程序的说明。

2. 那个 React Native Link 中没有解释 URL。以下是每个操作系统的深层链接资源。苹果/安卓

3. 您必须在开发者页面中向您的 Lyft 应用程序添加重定向 URL。此 URL 将被精细处理到每个操作系统（IOS 和 ANDROID）的本机应用程序设置中。您将在此处的 Lyft 开发者应用程序页面中设置重定向 URL 。

代码示例

安卓

AndroidManifest.xml

<intent-filter android:label="lyft-app-authorize">
  <action android:name="android.intent.action.VIEW" />
  <category android:name="android.intent.category.DEFAULT" />
  <category android:name="android.intent.category.BROWSABLE" />
  <data android:scheme="http"
        android:host="lyft-app"
        android:pathPrefix="/authorize" />
</intent-filter>
<intent-filter android:label="lyft-app-authorize">
  <action android:name="android.intent.action.VIEW" />
  <category android:name="android.intent.category.DEFAULT" />
  <category android:name="android.intent.category.BROWSABLE" />
  <data android:scheme="lyft-app"
        android:host="authorize" />
 </intent-filter>

IOS

信息.plist

<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>lyft-app</string>
    </array>
  </dict>
</array>

AppDelegate.swift

- (BOOL)application:(UIApplication *)application
            openURL:(NSURL *)url
            options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options
{
  return [RCTLinkingManager application:application openURL:url options:options];
}

- (BOOL)application:(UIApplication *)application continueUserActivity:(NSUserActivity *)userActivity
 restorationHandler:(void (^)(NSArray * _Nullable))restorationHandler
{
  return [RCTLinkingManager application:application
                   continueUserActivity:userActivity
                     restorationHandler:restorationHandler];
}

Lyft 开发者应用页面

应用管理页面

反应本机

加载 URL / 处理重定向

  componentDidMount() {
        Linking.openURL(url);
        Linking.addEventListener('url', (responseUrl) => {
          console.log(responseUrl);
        });
      }