As a front-end development students, the necessary back-end knowledge or will be some of the most direct the most basic is the implementation of the login. Here is GitHub as an example, the first is to go to GitHub official website to set the necessary information, the process is as follows: open the official website to log in to your account: open Setting -> Developer Setting


OAuth Applications – click Register a new Application -> Set application name, Homepage URL, and application Description and Authorization callback URL. More detailed procedures can be found in the official documentation. Let me draw it a little bit more visually. As follows:

   



Which belong to my personal client data erased some, want to achieve friends can use their own;

At present, many large websites support third-party login. As a programmer, the frequency of GitHub is high. Here, take GitHub as an example. When it comes to third-party logins, Oauth (Open Authorization) is an open standard that allows users to give third-party applications access to the user’s private resources stored on a site (such as photos, videos, contact lists) without having to provide a user name and password to third-party applications. This protocol requires the data submitted by the customer service end to match the data of the service provider (GitHub), and the authorization can be passed if it is correct. The login and authorization process of OAuth protocol is as follows: A. The client directs the user to the authentication server; B. The user decides whether to grant authorization to the client; C. If the user is authorized, the authentication server directs the user to the redirection URI specified by the client and gives the code in the hash part of the URI. D. The browser sends a request to the resource server to apply for a token; E, get the token holding the token to do the operation.

Previous code:

const router = require('koa-router')() const config = require('.. /config') const fetch = require('node-fetch') const routes = router .get('/login', Async (CTX) => {// Go to github grant page const dataStr = (new Date()).valueof (); var path = 'https://github.com/login/oauth/authorize'; path += '? client_id=' + config.client_id; path += '&scope=' + config.scope; path += '&state=' + dataStr; Console. log(path) // authorize (registration/application) for our application ctx.redirect(path) // Send authorization to the middle page}). Get ('/oauth/callback', async (ctx) => { const code = ctx.query.code let path = 'https://github.com/login/oauth/access_token'; const params = { client_id: config.client_id, client_secret: config.client_secret, code: Code} await fetch(path, {// node-fetch method: 'POST', headers: {' content-type ': 'application/json' }, body: Json.stringify (params)}).then(res => {// console.log(res) return res.text() Convert to text}).then(body => {const args = body.split('&'); let arg = args[0].split('=');
            const access_token = arg[1]; console.log(access_token); return access_token; }). Then (async (token) = > {const url = 'https://api.github.com/user?access_token=' + token / / token is request token ring console.log(url) await fetch(url) .then(res => { return res.json() }) .then(res => { console.log(res) ctx.body = res }) }) }) module.exports = routes;Copy the code

The configuration page code is as follows:

module.exports = {    
'client_id': '1fc534c9a4*************'.'client_secret': 'f5380d4*****************aeb2027ac87b6dc6'.'scope': ['user'}}Copy the code

Finally, the next wave of renderings:

 




See GitHub for the complete code

The process is that the client submits data to GitHub for verification. After verification, the client will continue authorization and apply for a token. After obtaining the token, the client can do other operations.

I hope this article has been helpful. If you have any comments or ideas, please leave a comment at the bottom of this article.