Add GitHub Authorization to an OAuth Client App
We're adding Github authorization to our client app
Create a function that is called on window load. In that function store the parameters that get sent over to the Github auth server.
In our query params, we will set the response_type parameter to "code" in order to ask the auth server for a code. Asking for a code from the auth server is more secure than asking for the access token through a browser
Finally, create a URL from the params and an authorization endpoint. Using a query selector select an anchor tag and set the href attribute to the URL that you created.
Instructor: [0:00] Open the index.html file and add an anchor tag. Add a text in the anchor tag that reads, authorized with GitHub. Head to the terminal and run, npm run dev, to start the dev server.
[0:18] Once the app is done running, copy the URL and open it in the browser. There is an index.js file linked in the index.html. Open this file and let's start writing some authorization scripts.
[0:36] Parse a function to the onload window property, which will be called when the browser loads. Then, call an ask for consent function in the onload function.
[0:49] Now go ahead and create the ask for consent function and inside the function create an object called O of query params that will store the query parameters that will be sent to the GitHub authorization server.
[1:06] Set the response type to code, which asks one of code from the other server, and it's more secure than asking for the access to control a browser. Use this code to ask for the user profile and also their public repositories.
[1:25] Set the redirect URL to the local host home page through the config object. URL must match the URL you provided when you created the application on GitHub. Go ahead and import the config object, then set the client ID.
[1:45] The client ID is stored in the config object. Use the state parameters to store any information you want to remember about the user when they are redirected back to your site. Convert the query from a JavaScript object to an actual URL query using the QoS.stringify method.
[2:11] Import QS from the query string library. Compose the authorization URL which should be made up of both the authorization endpoint that is defined in the config object and also the query. Grab the login link from the DOM which we added in the index.html file. Then set its href attribute to the authorization URL.
[2:39] Head back to the browser and click the authorize with GitHub link. The result on now we not see that you are asking for a consent to have access to their public repositories and test now data.
[2:59] In this case, we are both developer and the results owner. Click the authorize button to authorize the application. You will be redirected back to the application and authorization code which you asked for using the response type when you present in the URL.
[3:18] The state will also be present in the URL. You can use it to remember things like which page to use our respond before they left the site for the authorization.