Monday, April 13, 2015

Google 3rd Party Authentication(A time and mind saving trick for the web enthusist)


Google 3rd Party Authentication
(A time and mind saving trick for the web enthusiast)
Gary King

This will teach the web enthusiast how to set up Google's third party Authentication for their website. In this way you will save yourself time and a headache by not having to have yet another username and password to remember for your website. I have particularly enjoyed this on other peoples websites where I really don't want to have to create yet another user especially if stuff like this exists where I can just use my Google or other account to access a page. In this tutorial we will be focusing on Google's third party authentication and showing how to set it up although you could pretty much the same thing for say Facebook or twitter, but to keep things simply I'm just going to show one way to do it. We will also be using JavaScript and HTML to achieve this.

Setting up your Google Authentication
1. First to begin your going to want to go to this website listed below...
/console.developers.google.com
Google will probably ask you to log in if you are not already logged in. Once logged in you should get a page like this one...
Creating your new Authentication Project
2. From here you will click on a new project. Call the project whatever you like. Just my advice but I would recommend copying and pasting the name of the project and the project ID, which Google will so graciously generate for you if you will accept it, and if not you can go ahead and change it and then paste those into a notepad or word document in case someday you need them. You may also want to back these up onto some form of cloud storage(like dropbox, onedrive, Google drive, etc) for safe keeping and quick access wherever you are. Last part of this step click create.


Authorizing Your Email
3. It will take you to a new page. On this new page click on the left side toolbar button called...
APIS & auth and then click on consent screen
Pick an email to use for this. This will authorize that email to access your website. I recommend using your most commonly used email with the project it is associated with. If you are building a website for work and use a special Google account for work things use that account. If you are doing this to learn or have fun then use your personal Google account. Next you will want to give it a product name and again you may want to copy and paste that wherever you were storing that other special and unique data whether that be a notepad note or a word document. Then click save.

Creating the Client ID and Selecting Your URL Redirect
4. Click on the Credentials tab in the left toolbar. Then click create a new Client ID. A pop up will open up and depending on what you want to do here you might select a different options for different occasions. For us we will pick new Web Application, and then under the redirect URl's you put the website you want your website to redirect to once logged in, and whatever other information you want it to pass. When I did this for the first time I created a website that passed my email address in the url. I don't recommend this if you want to keep your email address to people you know and away from spammers who can easily get information from that url bar of your browser, and then click create. This will generate a whole bunch of unique data like a unique Client ID, Client Secret, etc. Again you will want to copy and paste these where you are storing your other information for safe keeping should you need them latter, which is just a good habit to get into anyways.



Now this is where this tutorial can become very specific and really works to meet just BYU students Taking IT 210. That being said I will still try to keep this as general as possible to help those understand how this could work for projects other than 210's memes lab.
For 210 students your main view file is in a file called memes.ejs
inside this file there is a section where there is an unordered list with items that go in the header.
(if your not taking 210 you can either just copy the code bellow and take out parts the parts that are specific to the webpage I am referencing, or just try to imitate it using what knowledge of HTML you possess)
this essentially turns the word login in the top navigation bar of the page into a button, which when pressed will redirect to the login page
(Again bellow is my Login Page from my 210 lab. Although this was specific to this class and project the principles taught in the code can be learned and reapplied in other circumstances)
Code Example(much of this is fluff code and does absolutely nothing, so you don't have to copying all of it may be unnessisary to accomplishing your task, and may not help you if you do not understand what the code is doing)
<%/************************************************************************************
This comment is inside JavaScript exit marks, so it will not render on that HTML page.
This page contains the HTML for the login page. The extension EJS stands for Embedded
JavaScript and is HTML built by JavaScript.
YOU SHOULD NOT NEED TO CHANGE THIS PAGE
************************************************************************************/%>
(this links to the different JavaScript pages that are run)
(This code blow lints to the different css style pages)

Node Login Page
(Below is embedded css)
(Below is the body and main bulk of the HTML for this page)
This page is designed to automatically redirect back to that previous page from whence it was called. Before it redirects though it checks with Google to see if you are logged in. If so in this case it changes the value of a variable on my main page from 1 to 0, and also returns the users name to the website thus welcoming you to the cite by name.
I hope this tutorial was useful for you and that you learned from it some valuable things that can help you with the projects you are working on.
If you have further questions about this you can email me at: gary.j.king.iii@gmail.com

Also some great Examples of this are starting with my favorite
easybib.com which is a great referencing website which if you are a student and you aren't already using it I highly recommend it as it makes getting source information as easy as copying and pasting a url most of the time and it can easily generate a works cited or bibliography for you.
That was actually the only one I could think of off the top of my head, but man I wish there were more because it certainly does make it so much easier.

Works Cited
"EasyBib: The Free Automatic Bibliography Composer." EasyBib. N.p., n.d. Web. 13 Apr. 2015.
http://www.easybib.com/
Easy Bib is an awesome and easy Bibliography generator. It usually only requires a url to get started and will get much if not all of the sourcing credential information for you. It is a huge time saver, and is also really good at teaching the practical use of the things discussed in the tutorial as it features third party login from
Google(which is the login I use for this site).
"HTML." W3Schools Online Web Tutorials. N.p., n.d. Web. 13 Apr. 2015.
http://www.w3schools.com/
This is an awesome website for getting any kind of help with any web related projects. This site has great tutorials and demonstrations on how to do certain things in HTML, CSS, JavaScript, PHP, etc.
"IT 210." - Labs. N.p., n.d. Web. 13 Apr. 2015.
https://it210.it.et.byu.edu/
This website is a great resource for all it210 students. It is where you get instructions on what to do for your labs and tips on how to do those things. It's also great for non-it210 students who want to learn how to make websites, set up servers, n'at. Why is it good for non-it210 students? It gives tips on how to do things and can direct you to sources for doing things in says php,c#,jsp, etc.
"Newest Questions." - Stack Overflow. N.p., n.d. Web. 13 Apr. 2015.
http://stackoverflow.com/questions
The Stack Overflow is usually the first cite that pops up when you Google a specific questions on how to get a website to do something. This website provides a space to ask questions and then allows others to answer the questions and insert their code to show you what changes you need to make to fix yours. Luckily there have been so many coding questions asked on how to code this or that, that you probably won't have to ask your question on the site but you will still be able to find the answer to it there because someone else has probably already asked your same question.
"One Account. All of Google." Google Developers Console. N.p., n.d. Web. 13 Apr. 2015
https://console.developers.google.com/project
This cite was cited and used in the Tutorial. It is great for setting up that third party Google Login that was the aim and goal of the Lab. Google does a beautiful job of setting up this web page and makes it simple and easy to use. It is a great example of a functional and yet efficient webpage.



No comments: