Skip to content

Commit 066c73f

Browse files
authored
docs: update authentication docs (#73)
1 parent 91f7374 commit 066c73f

File tree

1 file changed

+98
-47
lines changed

1 file changed

+98
-47
lines changed

Authentication.md

Lines changed: 98 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -8,81 +8,132 @@ This package requires the following environment variables to be set:
88

99
Below is a step-by-step of how to get the values to correctly fill those variables:
1010

11-
> Note: the names you enter below don't really matter, so you can just put whatever you feel comfortable with.
11+
> Note: the names you enter below don't really matter, it's an app that only you will have access to so you can just put whatever you feel comfortable with.
12+
> Google also likes to change these screens often, so things might not be 100% up to date (you can open a pull request, if thats the case :) )
1213
13-
1. Visit the [Google API Console][api-console].
14+
1. Visit https://console.developers.google.com/apis/credentials
1415
1. Create a new project:
1516

16-
<img width="296" alt="chrome-apis-create-project" src="https://cloud.githubusercontent.com/assets/1402241/21517725/55e5c626-cc96-11e6-9b55-ec9c80e10ec4.png">
17+
> <img width="772" alt="Google APIs: Create project" src="https://user-images.githubusercontent.com/1402241/77865620-9a8a3680-722f-11ea-99cb-b09e5c0c11ec.png">
1718
18-
1. Enter a name and click `Create`. This can take some seconds, and Google will notify you when it's done.
19-
1. Visit the [Google API Console][api-console] again.
20-
1. Enable the API, clicking on the button `Enable`:
19+
1. Enter a name and click `Create`. This can take some seconds, and Google will notify you when this step is done.
20+
1. Visit https://console.cloud.google.com/apis/credentials/consent
21+
1. Select **External** as the user type. Then click **Create**.
2122

22-
<img width="400" alt="chrome-apis-enable-webstore" src="https://cloud.githubusercontent.com/assets/1402241/21517842/2a9f36a4-cc97-11e6-8ffa-ad49ac2ca3ce.png">
23+
> <img width="804" alt="OAuth Consent Screen" src="https://user-images.githubusercontent.com/1402241/133878019-f159f035-2b76-4686-a461-0e0005355da6.png">
2324
24-
1. On the page that opened, search for `Chrome Web Store API`, and enable it.
25+
1. Fill the Application name and the required email fields, and click **Save**
2526

26-
1. Open **Credentials** > **Create credentials** > **OAuth client ID**:
27+
> <img width="475" alt="Consent screen configuration" src="https://user-images.githubusercontent.com/1402241/77865809-82ff7d80-7230-11ea-8a96-e381d55524c5.png">
2728
28-
<img width="400" alt="create-credentials" src="https://cloud.githubusercontent.com/assets/1402241/21517881/64f727f8-cc97-11e6-9c6b-b347b71352bf.png">
29+
1. On the next page, the "Scopes" step, leave everything as default and click "Save & Continue".
2930

30-
1. Click on **Configure consent screen**:
31+
> <img width="400" alt="configure consent screen" src="https://user-images.githubusercontent.com/630449/109427533-0b8e1d00-79b0-11eb-98f6-e63410459892.png">
3132
32-
> <img width="400" alt="configure consent screen" src="https://cloud.githubusercontent.com/assets/1402241/21517907/92640e0e-cc97-11e6-93f7-d077664eead9.png">
33+
1. On the 3rd screen, click on "Add Users" and add your own email address.
3334

34-
1. Enter a product name and save.
35-
1. Select **Other** and click **Create**:
35+
> <img width="632" alt="Test users selection" src="https://user-images.githubusercontent.com/1402241/106213510-7c180300-6192-11eb-97b4-b4ae92424bf1.png">
3636
37-
> <img width="187" alt="client type id" src="https://cloud.githubusercontent.com/assets/1402241/21517952/d1f36fce-cc97-11e6-92c0-de4485d97736.png">
37+
1. On the next page, click "Back to Dashboard".
3838

39-
1. A new modal opens, with two fields, the first containing a `client ID`, and the second containing a `client secret`. Save those values, as we are going to need them later.
39+
1. Visit https://console.developers.google.com/apis/library/chromewebstore.googleapis.com
40+
1. Enable the API, clicking on the button `Enable`:
4041

41-
1. In the following URL, replace `<YOUR_CLIENT_ID>` with the value of your `client ID`, and open it:
42+
<img width="400" alt="chrome-apis-enable-webstore" src="https://user-images.githubusercontent.com/630449/109427423-97ec1000-79af-11eb-9451-2f53f48fbbe2.png">
4243

43-
```
44-
https://accounts.google.com/o/oauth2/auth?client_id=<YOUR_CLIENT_ID>&response_type=code&scope=https://www.googleapis.com/auth/chromewebstore&redirect_uri=urn:ietf:wg:oauth:2.0:oob
45-
```
44+
1. Visit https://console.developers.google.com/apis/credentials
45+
1. Click **Create credentials** > **OAuth client ID**:
46+
47+
> <img width="771" alt="Create credentials" src="https://user-images.githubusercontent.com/1402241/77865679-e89f3a00-722f-11ea-942d-5245091f22b8.png">
48+
49+
Note: If you just created a project, it might take a few minutes for "OAuth Client ID" to appear in the dropdown list. You'll need to refresh to page to see it appear.
50+
51+
1. On the next page, choose Application type "Desktop app" and add a name. Click "Create".
4652

47-
1. Follow the steps shown on the screen and, on the last page, you will see another code which is the `auth code`. Save this value, as we will also use it later. If you happen to see a screen saying something like `This app isn't verified`, just click on `Advanced`, and then `Go to <App name> (unsafe)`. It only says that because the app you just created is not verified by Google, but in our case, it doesn't make a difference.
53+
> <img width="400" alt="client type id" src="https://user-images.githubusercontent.com/630449/109427629-7c353980-79b0-11eb-9864-357baddd3efe.png">
4854
49-
> <img width="400" alt="auth code" src="https://cloud.githubusercontent.com/assets/1402241/21518094/c3033bb0-cc98-11e6-82bb-f6c69ca103fe.png">
55+
1. A new modal opens, with two fields, the first containing a `Client ID`, and the second containing a `Client Secret`. **Save those values,** as we are going to need them later.
5056

51-
1. Run this in your browser's console.
52-
It's just a wizard to create and copy a `curl` into your clipboard:
57+
> <img width="400" alt="configure consent screen" src="https://user-images.githubusercontent.com/630449/109427660-a1c24300-79b0-11eb-9857-70328ee8f116.png">
5358
54-
```js
55-
var clientId = 'YOUR CLIENT ID HERE'
56-
var clientSecret = 'YOUR CLIENT SECRET HERE'
57-
var authCode = 'YOUR AUTH CODE HERE'
59+
1. Visit https://console.cloud.google.com/apis/credentials/consent
60+
1. Click **PUBLISH APP** and confirm
5861

59-
copy(
60-
`curl "https://accounts.google.com/o/oauth2/token" -d "client_id=${encodeURIComponent(
61-
clientId,
62-
)}&client_secret=${encodeURIComponent(
63-
clientSecret,
64-
)}&code=${encodeURIComponent(
65-
authCode,
66-
)}&grant_type=authorization_code&redirect_uri=urn:ietf:wg:oauth:2.0:oob"`,
67-
)
62+
> <img width="771" alt="Publish app" src="https://user-images.githubusercontent.com/27696701/114265946-2da2a280-9a26-11eb-9567-c4e00f572500.png">
6863
69-
console.log('The curl has been copied. Paste it into your terminal.')
64+
1. In the following URL, replace `<YOUR_CLIENT_ID>` with the value of your `Client ID`, and open it:
65+
66+
```sa
67+
https://accounts.google.com/o/oauth2/auth?response_type=code&scope=https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fchromewebstore&redirect_uri=http%3A%2F%2Flocalhost%3A8818&access_type=offline&client_id=<YOUR_CLIENT_ID>
7068
```
7169

72-
1. Paste the generated code in your terminal and run it. If your terminal doesn't natively support `curl`, try using the `git bash` terminal instead, or use [online curl](https://onlinecurl.com/). You can also [manually install curl](https://curl.haxx.se/dlwiz/), if none of options before worked.
70+
1. Follow the steps shown on the screen. If you happen to see a screen saying something like `This app isn't verified`, just click on `Advanced`, and then `Go to <App name> (unsafe)`. It only says that because the app you just created is not verified by Google, but this was created on your account and will only be used by you, so you don't really need to worry about it.
71+
72+
1. You will reach this error page, with a URL that looks like:
7373

74-
1. The `curl` command will give you This will give you an object which looks like the following:
74+
```
75+
http://localhost:8818/?code=4/0AX4XfWjwRDOZc_1nsxnupN8Xthe7dlfL0gB3pE-MMalTab0vWZBDj9ywDMacIT15U-Q&scope=https://www.googleapis.com/auth/chromewebstore
76+
```
7577

76-
<img width="400" alt="access token" src="https://cloud.githubusercontent.com/assets/1402241/21518331/9b7e3b42-cc9a-11e6-8d65-cde5ba5ea105.png">
78+
> <img width="478" alt="A page that says 'This site can’t be reached'" src="https://user-images.githubusercontent.com/1402241/163123857-d2741237-80ea-482e-b468-ef9df75330f8.png">
7779
78-
From this object, the only important information is the `refresh_token`, so it is important to save this value as, you guessed it, we are going to need it later.
80+
1. On the URL, copy the `approval code` which is between `code=` and `&scope`, it should look like this:
7981

80-
1. You should have now a `client ID`, a `client secret`, and a `refresh_token`. Use them to set the following environment values:
82+
```
83+
4/0AX4XfWjwRDOZc_1nsxnupN8Xt-dont-use-this-code-IT15U-Q
84+
```
8185

82-
- `GOOGLE_CLIENT_ID`: set the value to `client ID`.
83-
- `GOOGLE_CLIENT_SECRET`: set the value to `client secret`
84-
- `GOOGLE_REFRESH_TOKEN`: set the value to `refresh_token`
86+
1. On the same page you can run this in the browser console, it's a wizard to create your `refresh_token`:
87+
> Do not forget to fill the three variables below on the code
88+
89+
```js
90+
var clientId = 'YOUR CLIENT ID HERE' // <<<<<<<<<<<<<<<<<<<<<<
91+
var clientSecret = 'YOUR CLIENT SECRET HERE' // <<<<<<<<<<<<<<<<<<<<<<
92+
var authCode = 'YOUR AUTH CODE HERE' // <<<<<<<<<<<<<<<<<<<<<<
93+
94+
// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
95+
// Fill those variables above
96+
97+
;(async () => {
98+
const response = await fetch('https://accounts.google.com/o/oauth2/token', {
99+
method: 'POST',
100+
body: new URLSearchParams([
101+
['client_id', decodeURIComponent(clientId.trim())],
102+
['client_secret', decodeURIComponent(clientSecret.trim())],
103+
['code', decodeURIComponent(authCode.trim())],
104+
['grant_type', 'authorization_code'],
105+
['redirect_uri', 'http://localhost:8818'],
106+
]),
107+
headers: {
108+
'Content-Type': 'application/x-www-form-urlencoded',
109+
},
110+
})
111+
const json = await response.json()
112+
console.log(json)
113+
if (!json.error) {
114+
if (
115+
typeof copy === 'function' &&
116+
!navigator.userAgent.includes('Firefox')
117+
) {
118+
copy(json.refresh_token)
119+
alert(
120+
'The refresh_token has been copied into your clipboard. You’re done!',
121+
)
122+
} else {
123+
console.log('Copy your token:')
124+
console.log(json.refresh_token)
125+
alert('Copy your refresh_token from the console output. You’re done!')
126+
}
127+
}
128+
})()
129+
```
130+
131+
1. You should have now a `Client ID`, a `Client Secret`, and a `Refresh Token`. Use them to set the following environment values:
132+
133+
- `GOOGLE_CLIENT_ID`: set the value to `Client ID`.
134+
- `GOOGLE_CLIENT_SECRET`: set the value to `Client Secret`
135+
- `GOOGLE_REFRESH_TOKEN`: set the value to `Refresh Token`
85136

86137
Now you should have all three environment variables correctly set. You can use the same values for all your extensions, but remember not share them publicly, as they will allow anyone to publish your extensions!
87138

88-
[api-console]: https://console.developers.google.com/apis/api/chromewebstore.googleapis.com/overview
139+
> This document was based on the [chrome-webstore-upload documentation](https://github.com/fregante/chrome-webstore-upload/blob/main/How%20to%20generate%20Google%20API%20keys.md). If there's something out of date, try checking their file, it might be more up-to-date.

0 commit comments

Comments
 (0)