使用 Firebase HTTP 函数（Firebase、Stripe OAuth、React (JSX) 前端）将授权代码返回到 Stripe

Posted 2023-02-22

【中文标题】使用 Firebase HTTP 函数（Firebase、Stripe OAuth、React (JSX) 前端）将授权代码返回到 Stripe

【英文标题】：Returning Authorization Code to Stripe using Firebase HTTP Function (Firebase, Stripe OAuth, React (JSX) frontend)

【发布时间】：2020-12-10 00:47:06

【问题描述】：

我有一个 React 前端，Firebase 后端尝试完成 Stripe OAuth 流程。重定向 URI 已返回（返回到 https://mywebsitename.com/oauth_return），并且我在该页面上打开的反应组件解析该 URL 并访问身份验证代码和状态。 （请看下文）

在“oauth_return.js”文件中

import React from 'react';
import queryString from 'query-string';

const oauth_redirect  = () => 

    //Parsing over URL
    const value=queryString.parse(window.location.search);
    const code=value.code;
    console.log('code:', code)
    const state=value.state;
    console.log('state:', state)

export default (oauth_redirect)

我遇到的困难是试图弄清楚如何使 firebase HTTP 函数通过 POST 方法返回身份验证代码。我所有的 firebase 函数都存在于函数目录的“index.js”文件中。我看到的所有教程都展示了在 Typescript 中构建此函数的各种方法，但我的代码需要用 javascript 编写。

在“functions/index.js”文件中

(...)

  exports.stripeCreateOathResponseToken = functions.https.onRequest((req, res) => 

  (...) Not sure what to write in this function to return the authorization code. All tutorials I've found are written in Typescript.

);

不幸的是，我不明白如何触发这个 HTTP 函数首先被调用（即我是否需要在“oauth_return.js”文件中显式调用它？如何将授权代码传递给它? 最重要的是，它如何将授权码发回给 Stripe？

我们将不胜感激。

【问题讨论】：

您在下面已经有一个很好的答案，我认为值得探索。但我想指出的是，Stripe 为标准/快速帐户提供了一个新的入职流程，不需要 OAuth。这可能值得研究。你可以在这里阅读更多内容：stripe.com/docs/connect/standard-accounts, stripe.com/docs/connect/express-accounts

谢谢 ttmarek！我肯定也会研究这个解决方案。

【参考方案1】：

这是为您的确切目的而编写的工作代码。希望这对您提供解决方案有所帮助。

exports.stripeCreateOathResponseToken = functions.https.onRequest((req, res) => 

    res.set('Access-Control-Allow-Origin', '*');

    if (req.method === 'OPTIONS') 
        console.log('Executing OPTIONS request code block');
        res.set('Access-Control-Allow-Methods', 'POST');
        res.set('Access-Control-Allow-Headers', 'Origin, Content-Type, Accept');
        res.set('Access-Control-Max-Age', '3600');
        res.status(204).send('');
     else if (req.method === 'POST') 
        console.log('Executing POST request code block');
        return oauthResponseCheck(req, res);
    
    else 
        // Log, but ignore requests which are not OPTIONS or POST.
        console.log(`We received an invalid request method of type: $req.method`);
        return;
    
);


function oauthResponseCheck(req, res) 
     // code: An authorization code you can use in the next call to get an access token for your user.
    // This can only be used once and expires in 5 minutes.

    // state: The value of the state parameter you provided on the initial POST request.
    const  code, state  = req.body;

    // Assert the state matches the state you provided in the OAuth link (optional).
    if (!stateMatches(state)) 
        console.log('Incorrect state parameter for state::', state)
        return res.status(403).json( error: 'Incorrect state parameter: ' + state );
    
   
    // Send the authorization code to Stripe's API.
    stripe.oauth.token(
        grant_type: 'authorization_code',
        code
    ).then(
        (response) => 
            var stripe_connected_account_id = response.stripe_user_id;
         
            console.log('Stripe Connected Account Saved successfully: ' + JSON.stringify(response));
            return res.status(200).json(
                status: true,
                message: 'Stripe Connected Account Saved successfully',
                data: response
            );

        ,
        (err) => 
            if (err.type === 'StripeInvalidGrantError') 
                console.log('Invalid authorization code: ' + code);
                return res.status(400).json(
                    status: false,
                    message: 'Invalid authorization code.::' + code,
                
                );
             else 
                console.log('An unknown error occurred: ' + err);
                return res.status(500).json(
                    status: false,
                    message: 'An unknown error occurred.::' + err,
                );
            
        
    );
)

【讨论】：

感谢分享 RameshD。我只是想知道这段代码到底应该去哪里？在 Stripe OAuth 调用“返回 URI”时调用的 React 组件内部？是否应该在 'functions/index.js' 中调用此代码，然后将其部署在 npm 中？我想我只是在努力弄清楚如何调用 HTTP 函数。

以上代码位于云函数内部（云函数的index.js）。它是一个只接受 post 方法的 http 云函数。在客户端唯一要做的就是使用数据 code:code, state:state 向这个 http 云函数发出 post 请求。您可以点击此链接进行客户端调用：***.com/questions/58817987/…

非常感谢 RameshD！我将尝试通过您建议使用该链接的代码来查看我是否可以得到一些工作。如果我成功了，我会在这里为未来的读者发布解决方案。

再次感谢 RameshD！我将把它指定为这个问题的解决方案（对于未来试图通过 Firebase 找出 OAuth 的人）。但是，我将添加一条注释，引用 ttmarek 所说的关于注册连接帐户流程不再需要 OAuth 的内容。再次感谢大家的支持！ :)