从 Stripe OAuth Redirect-URI（Stripe OAuth、Firebase 后端、React 前端）读取返回的数据

Posted 2023-03-21

【中文标题】从 Stripe OAuth Redirect-URI（Stripe OAuth、Firebase 后端、React 前端）读取返回的数据

【英文标题】：Reading returned data from Stripe OAuth Redirect-URI (Stripe OAuth, Firebase back-end, React front-end)

【发布时间】：2020-12-09 05:51:40

【问题描述】：

我完全无法弄清楚如何允许用户通过 Stripe OAuth 步骤为我的网站注册“关联帐户”。 （我正在使用 React 前端、Firebase 后端和 Stripe 构建一个市场网站来处理付款）。

我一直试图用来帮助指导我的一些指南如下：

(1) https://stripe.com/docs/connect/collect-then-transfer-guide ：我在第 2.2 步被困在本指南上。但是，由于我使用 Firebase 作为后端，因此本指南没有那么有用。 (2) https://medium.com/@c.nwaugha/integrate-stripe-payment-with-firebase-cloud-functions-part-2-e381babd39bc ：我被困在本指南的页面上方 1/3 左右（见下图黄色文字）

很遗憾，我不确定我的 Stripe 重定向 URI 应该是什么。我目前在我的 Stripe 设置中将其设置为类似于“https:MyWebsiteName.com/oauth_redirect”的内容，但是此链接还没有 React 前端，并且不确定它应该包含什么代码。

简单地说，我怎样才能继续 OAuth 设置过程并从返回的 URL 中提取数据。非常感谢任何清晰度。 （PS：我确实按照指南的建议研究了“正则表达式”，但找不到任何似乎对这种情况有用的东西）。

更新和解析 URL 解决方案 感谢 hmunoz 的建议，我能够解析返回的 URL 并在字符串中捕获条带 OAuth 授权代码。 （请看下面的代码）。

当用户在条带上完成 OAuth 表单后到达此页面“https://.../oauth_return”URI 时返回。

import React from 'react';
import queryString from 'query-string'; //this is a 3rd party library that is used to parse through the Redirect URL returned from Stripe.


const oauth_redirect  = () => 

    //Parsing over URL
    const value=queryString.parse(window.location.search);

    //Retrieves the "code" value.
    const code=value.code;
    console.log('code:', code)

    //Retrieves the "state" value.
    const state=value.state;
    console.log('state:', state)

... //(I'm not sure how to pass these strings into a Firebase HTTP function).


export default (oauth_redirect)

当前问题；使用 JAVASCRIPT 构建 Firebase HTTP 函数 我正在尝试构建一个使用 POST 方法的 Firebase HTTP 函数，以返回此授权码。我在这个反应网站的函数/src 目录的“index.js”中有一个函数。不幸的是，关于这个主题的所有指南都有firebase函数是.typescript，我正在使用.javascript。任何关于如何在 .javascript 中构建这个 HTTP 函数的清晰说明将不胜感激！！！

请注意：我在以下帖子中稍微澄清了这个问题：Returning Authorization Code to Stripe using Firebase HTTP Function (Firebase, Stripe OAuth, React (JSX) frontend)

【参考方案1】：

在这种情况下，redirect_uri 是您希望用户通过 Stripe 进行身份验证后登陆的最终页面。

这必须是你的网页，比如https://your-website.com/oauth-complete

在此页面上，您的 React 代码需要获取 URL 参数，例如 code: ac_123，这是授权代码，并使用该授权代码调用 Firebase 函数。

您的 Firebase 函数将通过使用 OAuth 令牌完成与此 Connect 帐户的 OAuth 连接。

这里描述了这两个步骤：https://stripe.com/docs/connect/oauth-standard-accounts#redirected

【讨论】：

谢谢hmunoz。我将获取此信息并尝试查看是否可以从 URL 解析授权代码并按照您的建议将其传递给 Firebase 函数。

我能够解析 URL，现在有了授权码；但是我无法找到一个教程来帮助了解如何构建 Firebase HTTP 函数，该函数将此授权代码返回到条带化（在 .javascript 中）。对此特定问题的任何澄清将不胜感激！

我对 Firebase 集成不是很熟悉，但我猜它通常看起来像您的集成调用带有授权代码的 Firebase 云函数。在您的云功能中，您使用授权代码将该 Stripe 帐户连接到您的平台。然后，您将从响应中获得的 Stripe 帐户 ID 存储在 Firestore 等数据库中。

【参考方案2】：

不确定我是不是来得太晚了。您可以从 /functions 中的 index.js 开始简单地取消示例。

您可以测试正在运行的 firebase 模拟器：从您的终端开始。

它可能从 localhost:5001/project-name/zone/newFunction 开始

exports.newFunction = functions.https.onRequest( (req, res) => 
 // your logic code here