Question

背景

我正在使用Lyft API以3脚Oauth2流程对用户进行身份验证。我已按照此documentation here将Deep Linking添加到我的应用中。

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

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

我尝试过什么

深层链接

lyftauth://

我可以在Safari中键入该链接，当我在手机上时，如果安装了应用程序，它会打开我的应用程序。我尝试将该链接添加为Lyft Developers页面上的重定向URL，但它不接受该url格式。

所以我确定我必须给开发者帐户页面一个重定向的URL，我知道它会尝试重定向到该URL，我知道我无法使用正确的URL来让我的应用程序打开备份。< / p>

React Native Oauth Libraries

我尝试使用库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 Component，

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

我将React Native Documentation中的代码添加到React Native Component，

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没有专门为您处理时，使用React Native将API重定向回到您的应用程序的最常用方法是什么？

Answer 1

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

<强>问题

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

<强>解决方案

示例解决方案回购Here

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

设置深层链接。可以找到有关如何添加链接到您的应用的说明here。
在React Native Link上没有解释URLS。以下是每个操作系统的Deep Links资源。 Apple / Android
您必须在开发者页面中向Lyft应用程序添加重定向URL。此URL将精确到每个操作系统的本机应用程序设置（IOS和ANDROID）。您将在Lyft Developer App Page 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开发者应用页面

应用管理页面

反应原生

加载网址/处理重定向

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

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

1 个答案: