react.js - React + Node.js 怎么做第三方接口返回的中转页?

Question

具体是这样的:

1. 我在页面跳转到第三方接口(类似微博登录之类)

2. 第三方接口返回数据后调用回调地址

3. 回调地址判断返回错误数据

4. 保存错误信息输出到中转页提示, 3秒后自动跳转

node.js使用的是koa 2,具体的跳转是这样的:

[GET] /index -> [weibo] -> [POST] /oauth -> [GET] /cart

需求看起来其实简单,但是在实现的过程中总觉得不是很好实现(?)

因为我用的是React,所以我在服务器也做了服务器渲染,因此不能直接使用类似res.render()的方法

所以现在出现的问题是,当[weibo]跳转到/oauth,在/oauth返回了一些JSON的信息,类似这样:

{
    code: '10000',
    message: '数据异常'
}

然后重定向到/cart输出错误信息.
但是在这个过程中JSON数据要怎么保存?
因为会重定向所以无法用ctx.res.err这样的方式做传递
那么除了用session还有其他方式来实现这个效果吗?
感激!!

Answer 1

まず第一に、ご招待いただきありがとうございます
私は React についてあまり知りませんし、他のスパ フレームワークでサーバーサイド レンダリングを行ったこともありません。 。 。
しかし、私はあなたがそれを分析するのを助けることができます
あなたのケースは、サードパーティのログインにgithubアカウントを使用する前に私が行ったことと似ています（ここではWeiboのサードパーティのログインを使用しています）。 oauth2 規約。
最初のステップでは、ユーザーがブラウザに URL を送信します (またはクリックしてログインします)。これは www.yourdomain.com/login ルートと呼ばれます。
2 番目のステップでは、サーバーが / を受け取ります。ログイン ルートを実行すると、URL の後に appid、コード、return_url、その他の情報が結合され、https://weibo.com/auth?appid=... のようなサードパーティのアドレスにリダイレクトされます
3 番目のステップ, weibo サーバーがこの get リクエストのパラメータ検証を受け入れ、問題がなければ、return_url のルート (post または get) を呼び出します。つまり、URL またはリクエスト本文に何らかの情報が含まれています。サードパーティの Web サイトからの情報は、この時点で実際に 2 回のハンドシェイクを経て、お互いを信頼します (この時点で、access_token を提供するサードパーティもあれば、access_token を要求するサードパーティもいます)。トークンを取得するには再度電話する必要があります)。
4 番目のステップは、この時点でサーバーが実際にサードパーティのユーザー アカウントとその他の情報を取得できるようにすることです。
5 番目のステップは、サーバーがサードパーティに保存されているユーザーの情報を取得したということです。それでは、何を待っているのでしょうか? 直接リダイレクトまたはレンダリングして、待望のブラウザーに応答を返すことができます。

この時点で、サードパーティによるログインの負担 (あなたを混乱させ、判断に影響を与える要因) を実際に脇に置くことができます。
サーバーにはすでにサードパーティのユーザー情報があり、フロントエンドで React やその他のライブラリを使用するかどうか、使用するかどうかに関係なく、この情報をローカル データベースに書き込まれた情報として扱うことができます。これはサーバー レンダリングの一種であり、リダイレクトする必要がある場合はローカル データベースをリクエストし、レンダリングする必要がある場合はレンダリングするだけです。

Answer 2

通常のログイン中にユーザー情報が保存される場所について考えてみましょう。

セッションまたは Redis を保存します。前者は自動的にトークンを生成して Cookie を設定しますが、後者は自分で行う必要があるだけです。