How to create a gitlab login button to allow the client app create repositories, make commits and pull request for the user?

user_8211088 0
Viewed 425

I would like that the users of my app can login through the gitlab without the user need configurate nothing, like many apps of the web, you only click in allow and is logged. Because I need use the gitlab api to create repositories, make commits, and pull requests in their accounts. I read this:

https://docs.gitlab.com/ee/api/oauth2.html#implicit-grant-flow

I need that be "implicit-grant-flow", because I don't want send nothing for the server, all thing should happen in the client app. I think that is it because I read:

"Implicit grant flow: This flow is designed for user-agent only apps (e.g., single page web application running on GitLab Pages)."

But I also read:

https://gitlab.example.com/oauth/authorize?client_id=APP_ID&redirect_uri=REDIRECT_URI&response_type=token&state=YOUR_UNIQUE_STATE_HASH&scope=public+write

APP_ID? So, the client need register the app in the gitlab account settings, ins't? But I don't want that the user have the work, I already login in the some web app using github by example, without need configurate nothing in my github account, I need the same here.

YOUR_UNIQUE_STATE_HASH? what?

I already created the gitlab application in:

https://gitlab.com/oauth/applications/

But I can't see nothing about "YOUR_UNIQUE_STATE_HASH" there.

I don't understand how this can be a login button that allow me to use the gitlab API to make a commit in name of the user for example.

Note: off course, I'll search about what should be "YOUR_UNIQUE_STATE_HASH" now.

gitlab-api gitlab oauth-2.0
2 Answers

1 - Register one app in:

https://gitlab.com/oauth/applications/

2 - Login the gitlab with:

https://gitlab.com/oauth/authorize?client_id=CLIENT_ID_THAT_YOU_REGISTRED_IN_THE_STEP_1&redirect_uri=YOUR_APP_URL_HERE&response_type=token&state=YOUR_UNIQUE_STATE_HASH

The "YOUR_UNIQUE_STATE_HASH" you can can leave with this.

3 - If you got success, you'll be redirect and the access_token is in the url.

4 - Test the gitlab API:

https://gitlab.com/api/v4/projects?access_token=THE_ACCESS_TOKEN_THAT_IS_IN_THE_URL

You also can get the token and clean the url like:

function getToken() {
    const url = new URL(window.location.href.replace(/#/g,"?"))
    const token = url.searchParams.get("access_token")
    const urlWithoutParams = url.href.split('?')[0]
    window.history.replaceState({}, null, urlWithoutParams)
    console.log(token)
}

To create a button is simple, you can create a login button like this:

<button onclick="window.location.href='https://gitlab.com/oauth/authorize?client_id=CLIENT_ID_THAT_YOU_REGISTRED_IN_THE_STEP_1&redirect_uri=YOUR_APP_URL_HERE&response_type=token&state=YOUR_UNIQUE_STATE_HASH'">Gitlab Login</button>
user_82110880

Warning, with GitLab 13.11 (April 2021)

GitLab OAuth implicit grant deprecation

GitLab is deprecating the OAuth 2 implicit grant flow as it has been removed for OAuth 2.1.

Beginning in 14.0, new applications will be unable to be created with the OAuth 2 implicit grant flow.
Existing OAuth implicit grant flows will no longer be supported in 14.4. Please migrate existing applications to other supported OAuth2 flows before release 14.4.

Deprecation date: June 22, 202

VonC_63090
Related