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)
(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:
Post a Comment