用户接受 Oauth2 权限后重定向回 App

Question

背景

我正在使用 Lyft API 通过 3 条 Oauth2 流程对用户进行身份验证。我已按照此 documentation here.

将 Deep Linking 添加到我的应用程序

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

的开发者帐户中设置的 URL

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

我试过的

深Link

lyftauth://

我可以在 Safari 中输入 link，当我在 phone 上并且安装了该应用程序时，它会打开我的应用程序。我试图在 Lyft Developers 页面上添加 link 作为重定向 URL，但它不接受 url 格式。

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

React Native Oauth 库

我尝试使用库 react-native-oauth。使用这个库时，我发现它没有按预期工作。许多问题在 githu.com 上打开，其中很多甚至没有回复。我试图为图书馆编辑代码以供我使用，但无论我最终以在不存在的对象上调用的方法结束。具体来说是一种叫做 authorize 的方法。

本机Xcode应用程序

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

代码示例

使用上面提到的 Linking 的文档，我将这段代码添加到我的 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并添加了一个link来打开应用程序，

我正在将 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;

问题

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

Answer 1

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

问题

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

解决方案

示例解决方案回购 Here

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

设置深度 Linking。有关如何将 Linking 添加到您的应用程序的说明，请参见 here.
URLS在那个React NativeLink没有解释。以下是每个 OS 的深度 Link 的资源。 Apple / Android
您必须在开发者页面中向您的 Lyft App 添加重定向 URL。此 URL 将被精细化为每个 OS、（IOS 和 ANDROID）的本机应用程序设置。您将在 Lyft 开发者应用页面 here.

代码示例

Android

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

info.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 开发者应用页面

应用程序管理页面

React Native

加载URL/处理重定向

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

用户接受 Oauth2 权限后重定向回 App

Redirecting Back to App After User Accepts Permissions Oauth2

react-native

lyft-api