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

Posted 2023-02-23

【中文标题】用户接受权限后重定向回应用程序 Oauth2

【英文标题】：Redirecting Back to App After User Accepts Permissions Oauth2

【发布时间】：2017-12-02 17:56:43

【问题描述】：

背景

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

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

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

我的尝试

深层链接

lyftauth://

我可以在 Safari 中键入该链接，当我在手机上并且安装了该应用程序时，它会打开我的应用程序。我尝试将该链接添加为 Lyft 开发者页面上的重定向 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 项目中。

代码示例

使用上面提到的链接文档，我将此代码添加到我的 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;

问题

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

【参考方案1】：

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

问题

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

解决方案

示例解决方案回购Here

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

设置深度链接。可以在here 找到有关如何向您的应用添加链接的说明。

在那个 React Native Link 中没有解释 URL。以下是每个操作系统的深层链接资源。 Apple / Android

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

代码示例

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

应用管理页面

反应原生

加载 URL / 处理重定向

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

【讨论】：

我在 Angular 5 / Ionic 应用程序中遇到类似问题。我使用 https://api.lyft.com/oauth/authorize?client_id=<my-client-id>&scope=public%20profile%20rides.read%20rides.request%20offline&state=true&response_type=code','_blank'); 但遇到以下错误：Someone wanted to request access to your Lyft account, but didn't set things up properly... @wuno 你遇到过这个吗？

我没有对不起。我希望我能提供更多帮助。