OAuth2 is an open authorization standard that allows users to allow third-party applications to access specific private resources on a server without giving third-party applications their account and password on a server.
1. Authorization process
- The four roles
Resource Owner: indicates the Resource Owner. Resource Server: indicates the Resource Server. Client: indicates the third-party application Client
- process
When a third-party application initiates an Authorization Request, the following parameters are required (when the Authorization type is Authorization Code) : a) response_type: Mandatory. The value is fixed to code. B) Client_ID: Mandatory. ID of the third-party application. C) state: recommended A string provided by the Client. The server returns it to the Client as is. D) redirect_URI: Mandatory. Redirection address after authorization. E) Scope: optional. Indicates the scope of authorization
2. After a user authorizes a login, a third-party application obtains an Authorization Grant. An Authorization Grant is a credential that represents the resource owner’s Authorization to access a protected resource, and clients use it to obtain access tokens.
3. After the third party has Authorization, provide the following parameters to request the Authorization Server (when the Authorization type is Authorization Code) : a) Grant_type: Mandatory. Fixed value authorization_code. B) Code: Mandatory. Authorization Response Specifies the code of the Response. C) redirect_URI: Mandatory. It must be the same as redirecT_URI provided in the Authorization Request. D) Client_id: Mandatory. It must be the same as the client_ID provided in the Authorization Request.
4. The Authorization Server returns the following typical information: a) Access_token: access token. B) refresh_token: refreshes token. C) expires_in: expiration time.
For details, see [Authentication and Authorization] 1. OAuth2 Authorization
2. Wechat third-party login
- Lead to
Register a developer account on wechat open platform, and have an approved website application, and obtain the corresponding AppID and AppSecret. After applying for wechat login and passing the review, and setting the callback domain name (without agreement), you can start the access process.
- Authorization process
code
code
access_token
code
code
access_token
code
2. Access access_token via API with code parameter plus AppID, AppSecret, etc.
3. Make interface call through access_token to obtain basic data resources of users or help users to achieve basic operations.
- Code implementation
export function oauthRedirect(scope = 'snsapi_userinfo', state = 'wechat') {// The code that has already been authorized can not be authorizedif (code) {
return
}
let callbackUrl = encodeURIComponent(window.location.href)
const host = `https://open.weixin.qq.com/connect/oauth2/authorize`
let url = `${host}? appid=${APPID}&redirect_uri=${callbackUrl}&response_type=code&scope=${scope}&state=${state}#wechat_redirect`
window.location.href = url
}
Copy the codeRedirect_uri is the callback address after login. It must be the same as the callback domain name set in the website application. Otherwise, an error will be reported. Scope indicates the authorization scope, which represents the interface permission authorized by the user to a third party (SnSAPi_userinfo is selected to obtain user personal information). State is used to maintain the status of the request and callback, and then the request is authorized and returned to a third party.
After the user permits authorization, the redirect_URI url is redirected with the code and state parameters. If the user disables authorization, the redirection url does not carry the code parameter but only the state parameter. Specific information can be found in official wechat documents.
3. Third-party login on Weibo
- Lead to
Register an App through sina Weibo’s open platform, get the App Key, and set the authorization callback address.
- Authorization process
1. After a third party initiates a request for microblog authorized login, the microblog user can authorize the third party application, and the microblog user can pull up the application or redirect it to the third party website, and bring the code parameter of the authorized temporary note.
Access_token = client_ID = client_secret = client_id = client_id = client_secret
3. Make interface call through access_token to obtain basic data resources of users or help users to achieve basic operations.
- Code implementation
export function weiboOauthRedirect() {
if (code) {
return
}
let callbackUrl = encodeURIComponent(window.location.href)
const host = `https://api.weibo.com/oauth2/authorize`
let url = `${host}? state=wb&client_id=${APPID}&response_type=code&redirect_uri=${callbackUrl}? ` window.location.href = url }Copy the codeSpecific parameter information can be found in the official weibo document
3. Google third-party login
- Lead to
To create a project from the Google APIs console, go to Create credentials -> OAuth Client ID -> Web App, then type in JavaScript source, redirect URI, and get the client ID for subsequent operations.
- Authorization process
1. When a third party initiates a Google authorized login request, Google will pull up the application or redirect it to a third-party website after a Google user authorizes a third-party application, and return the code parameter in the callback function.
Access_token = client_ID = client_secret = client_id = client_id = client_secret
3. Make interface call through access_token to obtain basic data resources of users or help users to achieve basic operations.
The details can be found in the official Google documentation.
- Code implementation
// Initialization is required firststart() {
$scriptjs(['https://apis.google.com/js/api:client.js'], () = > {let gapi = window.gapi
gapi &&
gapi.load('auth2', () => {
this.auth2 = gapi.auth2.init({
client_id: client_id,
cookiepolicy: 'single_host_origin',
scope: 'profile'})})})} // Obtain Google authorization and log injumpGoogle() {
if (this.auth2) {
this.auth2
.grantOfflineAccess()
.then(async authCode => {
let res = await googleLogin(authCode.code)
res && this.handleRegister(res)
})
.catch(e => {
e.msg && this.$toast(e.msg)
})
} else {
this.$toast('Your device does not currently support Google Play')}},Copy the codeThe details can be found in the official Google documentation
4. Facebook third-party login
- Lead to
Sign up for an App via Facebook developer platform, get the App Key, and set the authorization callback address (HTTPS only).
- Authorization process
1. When a third party initiates a Facebook authorized login request, Facebook will pull up the application or redirect it to the third party website after a Facebook user authorizes the third party application, and bring the code parameter of the authorization temporary note.
Access_token = client_ID = client_secret = client_id = client_id = client_secret
3. Make interface call through access_token to obtain basic data resources of users or help users to achieve basic operations.
- Code implementation
export function facebookOauthRedirect(cb) {
if (code) {
return} // Check whether you can access the Internetlet callbackUrl = encodeURIComponent(window.location.href)
const host = `https://www.facebook.com/dialog/oauth`
let url = `${host}? client_id=${clientId}&redirect_uri=${callbackUrl}&code=acgon&state=fb`
$scriptjs(['https://code.jquery.com/jquery-3.1.1.min.js'], () => {
window.jQuery.ajax({
type: 'GET',
dataType: 'jsonp',
url: 'https://m.facebook.com/dialog/oauth',
timeout: 2000,
complete: function(XMLHttpRequest) {
if (XMLHttpRequest.status === 200) {
window.location.href = url
} else {
cb()
}
}
})
})
}
Copy the codeDetails can be found in the Official Facebook documentation