As a few years of work in the front of the brick dog, build a blog of their own is very necessary, one can summarize their own development learning experience, two can share and record their own learning track, can be said to be a lot of benefits, so today I will introduce a new way to build a blog.

Blog address

✈️ Why choose Github Issues over other methods?

Actually in the use of making issues set up blog before he had tried other ways to build their own blog platform, the earliest time oneself buy a cloud server, buy domain names, set up a blog system, but found that every time management blog very trouble, then made a blog background management system, convenient to manage the blog, This way is very high degree of freedom, can be arbitrarily according to their own ideas to achieve beautification and transformation of their own blog system, the shortcomings are also obvious, the monthly server rental cost is also a small cost, over a long time to give up. Later, I tried to use Hexo framework to build a blog and mount it to Github. This method does not need to rent a server by myself and can be deployed on Github. However, there are some disadvantages, such as poor customization ability, and I can only build my own blog based on some templates provided by Hexo. In addition, the comment function of blog is not very perfect. Although it can be implemented based on some third-party plug-ins, such as “Say more”, the stability is not very strong, and it is troublesome to use, and finally gave up.

Github Issues have the following advantages:

  • Natural separation of the front and back ends

Github provides an API that makes it easy to interact with data, such as getting issues list data, liking an issue, and commenting on an issue.

  • Multiple interface invocation methods

Github provides developers with two kinds of interface calls, REST API V3 and GraphQL API V4, so you can use different call methods according to your needs.

  • Github issuessupportMarkdownSyntax, support toissueslabelling

Github Issues has built-in support for Markdown syntax. At the same time, for each issue, you can set the corresponding Label (Label), and even customize the Label color. Here I have to say that Github is really thoughtful for everyone 😄.

  • Github provides basic user information

Github provides an interface for obtaining users. After logging in to Github using a Github account, users can obtain the basic information of users, including user name, profile picture, coordinate location, email, etc., so that we can display these basic information.

🚀 Get to know Github App

What is Github App

As we mentioned earlier, we can do a lot of things based on Github API, but many interfaces cannot be called directly. You must provide authentication information to call successfully. What is Github App? You can refer to the official Github App.

Simply put, Github provides a way for users to authenticate by creating a Github App, setting up Github functionality and permissions, and installing the App in a repository. This gives the Repository access to the Github App.

Identify and authorize users for the GitHub App

When our Github App initiates a request to the server on behalf of the user, it must use the user’s access token to authorize the request, which mainly includes the following three steps (please refer to the Github App authorization process here for details) :

  1. Users are redirected to request their GitHub identity
  2. Users are redirected back to your site by GitHub
  3. Your GitHub App accesses the API with the user’s access token
  • Step 1: You need to go to Github’s designated authorization page for authorization request address:https://github.com/login/oauth/authorizeThis is a Get request with the following parameters:
The name of the type describe
client_id string mandatory. createGithub AppGenerated when theclient ID.
redirect_uri string mandatory. Redirected address. When the authorization is successful, the address will be redirected to and the authorization code will be returned along with the URL. It should be noted that the redirected address must be created with usGithub AppWhen fill in this applicationUser authorization callback URLBe consistent.
state string This field is optional. A random number string that prevents forgery attacks.
login string This field is optional. Recommended specific accounts for logging in and authorizing applications.
  • The second step:GithubRedirect back to the specifiedcallback URLWhen the authorization is successful,GithubWill redirect to the previous stepcallback URL“, and will carry one in the address barcodeParameter, which we then need to use to obtain the Token.

After the access to the authorization code, send a POST request to the address in order to get Token: https://github.com/login/oauth/access_token

This request also has some parameters to pass:

The name of the type describe
client_id string mandatory. Generated when creating the Github Appclient ID.
client_secret string mandatory. Generated when creating the Github Appclient secret.
code string mandatory. The authorization code obtained in the previous step.
redirect_uri string Not mandatory. Redirection address after authorization.
state string Not mandatory. Random number passed in in step 1.

If the request succeeds, the following result is returned:

access_token=e72e16c7e42f292c6912e7710c838347ae178b4a&token_type=bearer
Copy the code

There is a cross-domain problem with this request, which I will show you how to solve later.

  • Step 3: Use the acquiredTokenTo requestGithub APIWith the previous two steps successfully completed, we can now use the obtainedTokenTo call the correspondingGithub API.

The above is a complete process of authorization to obtain data, so here is how to create a Github App.

🌿 Create a Github App

Click the user profile picture on the Github homepage, select Settings menu, and click The Developer Settings menu to enter the Github Apps operation page. Click the New Github App button to enter the page for creating the Github App.

Github App name
Homepage URL
User authorization callback URL
User authorization callback URL
github.io

Then we need to set the related permissions, because we are using Issues as the data source of the blog, so we need to check to allow read and write operations.

Issues
Github
Issues

Create Github App
Github App
Github App

🐘 Install the Github App

As mentioned earlier, Github apps must be installed in the repository to get the permissions set when calling the API.

On the newly created Github App page, select the Install App menu on the left, and then select your account to Install. From there, you can choose to Install all repositories or a specific Repository.

conclusion

This concludes the part about using Github App to get access to the Github API.

The following is the qr code picture of my official account, welcome to follow.