Before, when using Github issues to build a blog platform, I studied how to obtain Github authorization and call API. Later, I chose a simpler account password and Token method. However, there is feedback from readers that such operations are still somewhat troublesome, and it is always unsafe to enter an account password on a third party’s page. Later, after research, Github App, a more elegant method, was finally found.

What is Github App?

To answer this question, you can apply it directly.Official documentsThe statement:

GitHub Apps are first-class actors within GitHub. A GitHub App acts on its own behalf, taking actions via the API directly using its own identity, which means you don’t need to maintain a bot or service account as a separate user.

In short, Github App can call Github API through the authentication information provided by GitHub.

Careful readers will find that Github also provides a thing called “OAuth App”. Its usage is very similar to Github App. The biggest difference is that OAuth App obtains all the permissions.FixedAndRead only, users can only read fixed data and cannot modify data; Githubpapp is almost available.GithubAll the functional permissions provided, and the obtained permissions can be set to “read-only”, “readable and writable” and “access prohibited”, and the authorization granularity for permissions will be finer.

After obtaining the permissions for certain operations, we can use these permissions to build an independent App, such as a third-party Github client, etc. This is also the practical point of Github App.

Principle of Third Party Login

As mentioned earlier, Github App can complete authorization without the user entering an account password or Token on a third-party page. How does it do this? In fact, to put it bluntly, it is also a way of OAuth login, just changing the way of obtaining Token from “user input” to “provided by Github”.

The following describes the flow of this login method:

1. A website jumps to Github’s authorization page.
2. Github authorization page asks the user: “Do you want to allow Site A to obtain the following permissions?” The user clicks “Allow” to obtain the authorization code.
3. Github authorization page is redirected back to A website with authorization code on the URL.
4. A website retrieves Token from Github via the authorization code on the URL.
5. A website uses this Token to call Github API.

To complete the above process, you must first register a Github App.

Register Github App

EnterGithub home page, click on the user’s avatar, find setting/developer settings/github apps, and then click “New Github App” to enter the editing interface:

After filling in the name (here is SOMEONE:BLOG), description and homepage URL, the key isUser authorization callback URLFill in the callback address after obtaining authorization, and then set thePermissionsThere are some API reading and writing abilities that need to be used. If you want this APP to be used only by yourself, use the defaultOnly on this accountOtherwise, chooseAny account, and finally clickCreate Github AppJust.

After the operation is successful, you can see the information of this APP:

The Client ID and Client secret are the identification codes of this application and need to be written down.

After Github APP is registered, the third party website will need to use the Client ID of the app to find Github’s authorization code.

Get authorization code

To obtain the authorization code, a third-party website only needs to jump to the Github authorization page, which needs to carry two parameters in the URL, namely Client ID and Redirect URL.

Constclient _ id =' client id of app'
 Constredirect_url =' redirect _ url of app'
 
 location.href = ` https://github.com/login/oauth/authorize?  ` +
 `client_id=${CLIENT_ID}&redirect_uri=${REDIRECT_URL}`

After the jump, Github will ask the user if the APP is allowed to obtain certain permissions:

After the user confirms, he will be redirected to the given callback address with the authorization code:

At this time, the third party page (localhost:8080 here) has already got the authorization code, and it is necessary to exchange Token with this authorization code, the Client ID and Client secret of APP.

Exchange Token

The code for redeeming Token is as follows:

router.post('/oauth', async function (ctx, next) {
 const { clientID = CLIENT_ID, clientSecret = CLIENT_SECRET, code } = ctx.request.body
 const { status, data } = await axios({
 method: 'post',
 url: 'http://github.com/login/oauth/access_token?'  +
 `client_id=${clientID}&` +
 `client_secret=${clientSecret}&` +
 `code=${code}`,
 headers: {
 accept: 'application/json'
 }
 }).catch(e => e.response)
 ctx.body = { status, data }
 })

Due to cross-domain restrictions, this part of the code must pass throughServer sideImplementation, in other words, website A needs to send the authorization code to this server, and the server obtains the Token and returns it to website A again.

After getting the Token returned by the server, website a can use it when calling Github API by setting Header:

'Authorization': `Bearer ${Token}`

So far, it has been basically OK, but there is still a big problem. The data obtained by the current Token are “read-only” and cannot be submitted or modified to a Github warehouse-this is because the Github APP has not been installed in the warehouse, which is the biggest difference from OAuth APP.

Install Github APP

On my blog platformjrainlau.github.ioFor example, if you want users to be able to comment on an issue through the API, I need to install my Github APP in this warehouse:

Enter the Github APP editing page setting/developersettings/github apps/someone: blog, find the Install App on the left, and then select your account to install:

You can select all warehouses under your account or only one warehouse to use this APP. After clicking on the authorization, Github APP was installed. At this time, authorized warehouses can be read and written by users through API.

In the blog platform, users who comment through this APP will also have their appearance marked from Github APP:

Reference material

• GitHub OAuth Third Party Login Sample Tutorial-Ruan Yifeng