An app that displays a random selection of videos from the user's YouTube playlists. http://random-youtube.herokuapp.com/
-
Make a .env file in the ./server directory similar to .env.example and put in values.
-
Go to your Google Developer's Console
-
Click edit for Oauth 2.0 Client Ids
-
And enter authorized javascript origins urls:
-
For dev, mine was: http://localhost:4200
-
For prod, put in the deployed url. I deployed my app to [Heroku](https://- www.heroku.com "Heroku's Homepage"). Mine was https://random-youtube.herokuapp.com
-
Enter authorized redirect uris:
dev:
http://localhost:4200/api/auth/google/callback
prod:
https://random-youtube.herokuapp.com/api/auth/google/callback
- A package manager like npm
- Node.js
- Angular Cli
- GCP account
Create oauth credentials through gcp and set them as well as a redirect url and session secret (any string) in a .env file
SESSION_SECRET=string
CLIENT_ID=
CLIENT_SECRET=
REDIRECT_URL=http://localhost:8080/api/auth/google/callback
Run these commands in the terminal:
npm install
npm run dev
Open a new terminal tab and start the server by running
cd server
npm run dev
The app should automatically open in a browser at the url: localhost:3000
- Sign in with Google
- Request playlists and videos from YouTube
- Make a random selection of a user's videos.
- Display video thumbnails.
- Play a video when clicked.
- Autoplay next video.
Anuglar 9, Node.js, Express.
Brendt Bly
Although this tutorial is for React, it was helpful to see how to set up calling the OAuth endpoint on the server from an tag.
https://hackernoon.com/m-e-r-n-stack-application-using-passport-for-authentication-920b1140a134