## How to Get Google API Key and Client Secrets

> **Use this only for advanced features**: playlists / liked videos / subscriptions.
> Basic playback and search do **not** require Google API.

---

<!-- =======================
✦ Aesthetic Styles ✦
(Safe for GitHub/HackMD)
======================= -->

<div style="padding:14px 16px;border:1px solid rgba(120,120,120,.35);border-radius:14px;background:linear-gradient(180deg, rgba(120,120,120,.10), rgba(120,120,120,.04));">
<div style="font-size:16px;font-weight:700;letter-spacing:.2px;margin-bottom:8px;">
What you will create
</div>
<div style="opacity:.9;line-height:1.6;">
Two credentials will be generated inside Google Cloud:
<span style="display:inline-block;padding:2px 8px;border-radius:999px;border:1px solid rgba(120,120,120,.35);background:rgba(120,120,120,.06);font-weight:600;margin:0 4px;">API Key</span>
and
<span style="display:inline-block;padding:2px 8px;border-radius:999px;border:1px solid rgba(120,120,120,.35);background:rgba(120,120,120,.06);font-weight:600;margin:0 4px;">OAuth Client (Desktop App)</span>.
</div>
</div>

<br>

| Item | Where it comes from | What it’s used for |
| ------------------------------------------------------ | -------------------- | --------------------------------------------------------------------- |
| **API Key** | Google Cloud Console | Calling **YouTube Data API v3** |
| **OAuth Client (Desktop App)** → `client_secrets.json` | Google Cloud Console | Logging in to your Google account (read-only access to your own data) |

---

<div style="padding:14px 16px;border:1px solid rgba(120,120,120,.35);border-radius:14px;background:linear-gradient(180deg, rgba(80,140,255,.12), rgba(80,140,255,.04));">
<div style="font-size:16px;font-weight:700;letter-spacing:.2px;margin-bottom:8px;">
OAuth scopes used by JaTubePlayer
</div>
<div style="opacity:.9;line-height:1.65;">
JaTubePlayer requests <b>read-only</b> permissions (scopes) during login:
</div>
</div>

https://www.googleapis.com/auth/youtube.readonly
https://www.googleapis.com/auth/userinfo.profile

<div style="padding:12px 16px;border-left:4px solid rgba(80,140,255,.9);border-radius:10px;background:rgba(80,140,255,.06);">
<b>What that means</b><br>
• <code>youtube.readonly</code> → read your playlists / liked videos / subscriptions (no uploads, no edits)<br>
• <code>userinfo.profile</code> → read basic profile info (used to display logged-in account)
</div>

---

## Step 1 — Create a Google Cloud project

<div style="padding:10px 14px;border:1px solid rgba(120,120,120,.30);border-radius:12px;background:rgba(120,120,120,.05);">
<b>Goal:</b> Create a project container where your API + OAuth credentials will live.
</div>

<br>

1. Open: `https://console.cloud.google.com/`

2. At the **top bar**, click the **Project selector**
(it may say “Select a project” or show an existing project name)

3. In the popup, click **NEW PROJECT** (usually top-right)

4. Enter **any** Project name

<div style="margin-top:6px;padding:10px 12px;border-left:4px solid rgba(255,190,80,.9);border-radius:10px;background:rgba(255,190,80,.08);">
<b>Tip:</b> We recommend you keep this in mind, just in case.
</div>


5. Click **CREATE**

6. After it finishes, click the **Project selector** again and **select your new project**

<div style="margin-top:6px;padding:10px 12px;border-left:4px solid rgba(80,255,200,.9);border-radius:10px;background:rgba(80,255,200,.08);">
<b>Demo note:</b> We use <code>test</code> for demo.
</div>


---

## Step 2 — Enable YouTube Data API v3

<div style="padding:10px 14px;border:1px solid rgba(120,120,120,.30);border-radius:12px;background:rgba(120,120,120,.05);">
<b>Goal:</b> Turn on the API so your key can call YouTube endpoints.
</div>

<br>

1. Left sidebar: **APIs & Services → Library**

* If the sidebar is hidden, click the **menu button** (top-left)

2. Click the **Search bar** (“Search for APIs & Services”)

3. Search: **YouTube Data API v3**

4. Click **YouTube Data API v3**

5. Click **ENABLE**

<div style="margin-top:10px;padding:10px 12px;border-left:4px solid rgba(80,255,200,.9);border-radius:10px;background:rgba(80,255,200,.08);">
<b>Done:</b> YouTube Data API v3 is enabled for this project.
</div>

---

## Step 3 — Set up OAuth Consent Screen (including Test Users)

<div style="padding:10px 14px;border:1px solid rgba(120,120,120,.30);border-radius:12px;background:rgba(120,120,120,.05);">
<b>Goal:</b> Allow Google login for a Desktop App and whitelist your account as a test user.
</div>

<br>

1. Left sidebar: **APIs & Services → OAuth consent screen**

### 3.1 App information
<br>

1. **App name**: anything (example: `JaTubePlayer`)

<div style="margin-top:6px;padding:10px 12px;border-left:4px solid rgba(255,190,80,.9);border-radius:10px;background:rgba(255,190,80,.08);">
<b>Tip:</b> We recommend you to keep this in mind, just in case.
</div>

2. **User support email**: select your Gmail

3. **Audience**: External

4. Scroll to **contact information**, then add your Gmail

5. Click **Create**

### 3.2 Test Users (REQUIRED)

<div style="padding:12px 14px;border:1px solid rgba(255,120,120,.35);border-radius:14px;background:rgba(255,120,120,.06);">
<b>Important:</b> Because the app is not verified/published, your account must be added as a test user.
</div>

<br>

1. Go to **Audience**

2. **+ Add Users**

3. Enter your gmail

<div style="margin-top:6px;padding:10px 12px;border-left:4px solid rgba(255,190,80,.9);border-radius:10px;background:rgba(255,190,80,.08);">
<b>Note:</b> Enter the account you wish JaTubePlayer to be able to login. Can have multiple, split with <code>space bar</code>, 100 accounts max.
</div>


---

## Step 4 — Create OAuth Client ID (Desktop App) and download `client_secrets.json`

<div style="padding:10px 14px;border:1px solid rgba(120,120,120,.30);border-radius:12px;background:rgba(120,120,120,.05);">
<b>Goal:</b> Generate a Desktop OAuth client and download the JSON file used for login.
</div>

<br>

1. Left sidebar: **APIs & Services → Credentials**

2. Click **+ CREATE CREDENTIALS**

3. Click **OAuth client ID**

4. **Application type** → choose **Desktop app**

5. **Name**: anything

6. Click **CREATE**

7. In the popup, click **DOWNLOAD JSON**

8. 

<div style="margin-top:10px;padding:12px 14px;border:1px solid rgba(80,255,200,.35);border-radius:14px;background:rgba(80,255,200,.08);">
Please keep the json file at a safe place.
</div>

---

## Step 5 — Create API Key (and restrict it)

<div style="padding:10px 14px;border:1px solid rgba(120,120,120,.30);border-radius:12px;background:rgba(120,120,120,.05);">
<b>Goal:</b> Generate an API key and lock it to YouTube Data API v3.
</div>

<br>

1. Still in: **APIs & Services → Credentials**

2. Click **+ CREATE CREDENTIALS**

3. Click **API key**

4. 

5. Copy the key

### Recommended: Restrict the key to YouTube Data API v3

5. In the credentials list, find your API key

6. Click the **Edit** icon (pencil)

7. 

(or open the **3-dot menu** → “Edit API key”)

8. Set:

* **Application restrictions** → **None**
* **API restrictions** → **Restrict key** → select **YouTube Data API v3**
* 

9. Click **SAVE**

---

## Step 6 — Use them in JaTubePlayer

<div style="padding:10px 14px;border:1px solid rgba(120,120,120,.30);border-radius:12px;background:rgba(120,120,120,.05);">
<b>Goal:</b> Paste the API key, then load <code>client_secrets.json</code> inside the app.
</div>

<br>

1. Open **JaTubePlayer**
2. Go to **Settings > Account & Authentication**
3. Paste your API key into:

* `Enter YouTube API`
4. Load your OAuth file:

* ` Select client secret`
* choose your `client_secrets.json`

---

## Quick troubleshooting

<div style="padding:12px 14px;border:1px solid rgba(255,190,80,.35);border-radius:14px;background:rgba(255,190,80,.08);">
<b>Login fails (permission / access denied)</b><br>
Most common cause: you didn’t add your Gmail under <b>Test users</b>.<br>
Go to: <b>APIs & Services → OAuth consent screen → Test users → Add users</b>.
</div>

<br>

<div style="padding:12px 14px;border:1px solid rgba(255,190,80,.35);border-radius:14px;background:rgba(255,190,80,.08);">
<b>“YouTube Data API v3” not working / API errors</b><br>
Make sure you enabled it:<br>
<b>APIs & Services → Library → YouTube Data API v3 → ENABLE</b>
</div>