background

Many websites are allowed to use the identity of third-party websites when logging in, such as wechat, Alipay, GitLab, etc. Then we use the front-end internal application weekly platform, automatic release, buried point system, etc. We need to call gitLab API to obtain some basic project information or obtain personal information

Principle – the 2.0 

OAuth (Open Authorization) is an open standard that allows a user to give third-party applications access to the user's private resources (such as photos, videos, and contact lists) stored on a site without having to provide a user name and password to third-party applicationsCopy the code

What is the specific concept, how to achieve the realization, I think Teacher Ruan Yifeng this article outh2.0[1] is better, here will not be detailed, directly into the actual combat

process

  1. Users log in by opening the app home page and clicking on GitLab
  2. After redirecting to GitLab’s authorization page, the user agrees to obtain his basic information
  3. Gitlab returns an authorization code and other parameters to redirect the URI and redirect to the corresponding web page
  4. Get the token of GitLab API after getting the code

The preparatory work

  1. First log in to GitLab as admin
  2. Go to Mysettings Apply as shown below

practice

Open console input

const url = 'http://xxxc.om/oauth/authorize? Client_id = 12345 & redirect_uri = http://127.0.0.1:9003&response_type=code&scope=read_user '
location.href = url
Copy the code

All Parameters

Jump to gitLab’s licensing page

redirect

The URL will carry the parameter code as shown below

The last step is to obtain the token

https://xxx/oauth/token
Copy the code

The parameters are the same as the table above, and get the following JSON

{
    "access_token": "".    "token_type": "bearer".    "refresh_token": "42".    "scope": "api". "created_at": 1577427939 } Copy the code

Now you can call the GitLab API as much as you like. Let’s get the profile first

GET /users/:username
Status: 200 OK
{
  "login": "octocat".  "id": 1,
 "node_id": "MDQ6VXNlcjE=". "avatar_url": "https://gitlab.com/images/error/octocat_happy.gif". "gravatar_id": "". "url": "https://api.gitlab.com/users/octocat". "html_url": "https://gitlab.com/octocat". "followers_url": "https://api.gitlab.com/users/octocat/followers". "following_url": "https://api.gitlab.com/users/octocat/following{/other_user}". "gists_url": "https://api.gitlab.com/users/octocat/gists{/gist_id}". "starred_url": "https://api.gitlab.com/users/octocat/starred{/owner}{/repo}". "subscriptions_url": "https://api.gitlab.com/users/octocat/subscriptions". "organizations_url": "https://api.gitlab.com/users/octocat/orgs". "repos_url": "https://api.gitlab.com/users/octocat/repos". "events_url": "https://api.gitlab.com/users/octocat/events{/privacy}". "received_events_url": "https://api.gitlab.com/users/octocat/received_events". "type": "User". "site_admin": false. "name": "monalisa octocat". "company": "GitHub". "blog": "https://gitlab.com/blog". "location": "San Francisco". "email": "[email protected]". "hireable": false. "bio": "There once was...". "twitter_username": "monatheoctocat". "public_repos": 2. "public_gists": 1,  "followers": 20. "following": 0. "created_at": "2008-01-14T04:33:35Z". "updated_at": "2008-01-14T04:33:35Z" } Copy the code

Gitlab other login methods

Before GitLab V10, the following API was officially provided to allow you to customize the login page, as long as you pass this verification.

https://gitlab.example.com/api/v4/session?login=john_smith&password=strongpassw0rd
Copy the code

The last

Nail nail on the market, wechat, other ways to login to apply, in the short term or on gitLab faster, the most important thing is to understand OAuth2.0😊

The resources

[1]

Outh2.0: http://www.ruanyifeng.com/blog/2019/04/oauth_design.html

This article is formatted using MDNICE