Some time ago, the company’s business expansion required oauth authorization login similar to wechat. I sorted out some things and recorded them.

demand

Company do financial and electricity this block, financial regulation, need to get the financial and business split into two separate business, but it is to use a system of account, there are some business coupling between each other, similar to send taobao alipay coupons function, so the split into two sets of accounts system also need the data of the two platforms, get through, thus we introduced authorization mechanism, Bind accounts on both platforms to open up data.

The authorization scheme adopts the authorization method similar to wechat, but it also needs a binding page to manually bind the accounts of the two platforms.

Sort out the requirements, and the general process is as follows:

  1. Click the business entrance of website B on website A to enter the authorization page of website A for authorization.
  2. After authorization, enter the binding page of website B for account binding of the two platforms;
  3. After the binding is successful, the service page of website B is displayed.

Demand analysis

After analyzing the above requirements, it can be found that there are altogether four pages: the entrance page of website A, the authorization page of website A, the authorization page of website B, and the business page of website B.

The entrance page of website A and the business page of website B are not authorized development pages. Only the authorization page of website A and the authorization page of website B are related to the specific authorization process and need to be designed and developed.

It can be seen that in the process of authorization, there are three link jumps, namely, jump to authorization page, jump to binding page, and jump to business page.

The program design

The authorization page uses the authorization of wechat to obtain the authorized application and the link after authorization by using parameters appID and redirect_uri. However, there is no reference for the binding page after authorization, so you need to design your own.

After authorization, redirect_URI will get a code and spell it behind. After jumping to the binding page, the server can use this code to get the relevant information of the user on website A, and then bind it to the account entered by the user. After the binding succeeds, token is written and the corresponding business page is jumped. The business page should be brought in from the URL, and we’ll name this parameter return_URI.

The authorization process is designed after the scheme is determined. The authorization process is as follows:

  1. Website A clicks the entrance of website B to enter the authorization page of website A, and determines whether the user has authorized the application according to the appID and login status. If so, obtaincodeJoining together toredirect_uriAnd jump; If not authorized, the authorization page is displayed.
  2. The user clicks the authorization button to obtaincodeJoining together toredirect_uriAnd jump;
  3. redirect_uriIs the account binding page of website B, and the binding page is obtainedcodeThe server checks whether the account has been bound. If the account has been bound, the server writes the account directlytokenLog in and jump toreturn_uriBusiness page, if not bound, the binding page is displayed;
  4. Obtain the verification code on the binding page, click the binding button to bind, and write the binding successfullytokenLog in and jump toreturn_uriOn the service page, authorization is complete.

Ps: This is a simple authorization process that leaves out link security validation, error handling, etc.

coding

The link code for the entry is as follows:

// Business page const return_uri = encodeURIComponent('https://b.com?a=b&c=d'); // bind page const redirect_uri = encodeURIComponent(' https://b.com/bind?return_uri=${return_uri} '); / / authorization page const authorized_uri = {redirect_uri} ` ` https://a.com/authorized/?appid=123&redirect_uri=$;Copy the code

Finally, the entry link on page A is as follows:

https://a.com/authorized/?appid=123&redirect_uri=https%3A%2F%2Fb.com%2Fbind%3Freturn_uri%3Dhttps%253A%252F%252Fb.com%253 Fa%253Db%2526c%253Dd

In this way, decodeURIComponent decodes redirect_URI on the authorization page of website A, and splice the code obtained by authorization to get the binding page address of website B:

https://b.com/bind?return_uri=https%3A%2F%2Fb.com%3Fa%3Db%26c%3Dd&code=xxx

DecodeURIComponent decodes return_URI on the binding page of b website, and after binding, write token to jump to the business page.

In the pit of

After obtaining return_uri from the binding page of website B, it was found that the parameter https://b.com?a=b&c=d was lost, and only https://b.com?a=b could be obtained. The following parameters were lost. Params = getQueryString (); params = getQueryString ()

function getQueryString(name) { var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)'); var r = window.location.search.substr(1).match(reg); if (r ! = null) return unescape(r[2]); return null; }Copy the code

This is a popular method to obtain URL params on the Internet. We have always used this method, but after obtaining params, this method will call unescape processing and return, so we decoded the link again and lost the parameter when jumping to the binding page. Then unescape was removed, and the modified method was as follows:

function getQueryString(name) { var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)'); var r = window.location.search.substr(1).match(reg); if (r ! = null) return r[2]; return null; }Copy the code

Ps: Do not use unescape if direct decoding is required, escape and unescape are deprecated after ES3, please use encodeURIComponent and decodeURIComponent instead.