So you're going to need to tell the back-end API which client apps are allowed
to use it. So here I am in
the ConferenceAPI.java class, up where I'm specifying the,
the endpoints API. And you'll notice that it has the client IDs. And this one
here, the Constants.API.EXPLORER_CLIENT_ID is the client ID for
the APIs Explorer and then this one here,
Constants.WEB_CLIENT_ID, this is where we're specifying the client
IDs of other apps, not the APIs Explorer,
but other web apps that are allowed to use this application. And if you knew the
client ID, you could just write it out here if you wanted, but we're using this
Constants class to hold our, our WEB_CLIENT_ID. So,
let's take a look at the constants class.
And you'll see here in the Constants class that we
define the client ID and to start with, there's no value,
so let's replace this with your client ID. So, yeah,
it is a value, but it's not a real value. So
you're going to need to go ahead and put your client
ID in here. And just a reminder that you get your
client ID in the developers console. And the client ID
includes everything. It's not just the number. It's the whole thing
that you see in the developers console up to
the .com part, if you see that on yours. And
you can just copy and paste the client ID from
the developers console. What we've done is that we've set
that the applications with web client ID as specified
are allowed to access our endpoints APIs, so we basically
granted permission to the UI to use our endpoints. But
another thing you have to do is that on the
client side, on the JavaScript side, on the web,
the web app UI side, you have to, when
the, when the user logs in, you need to
run the authentication process, so you need to identify yourself.
So you'll need to go into the web app
folder and then into the js folder and this time
you're going to have to go to app.js. One of
the things that this file does is that it runs
your authentication process when, when a user logs in.
And you're going to need to set the appropriate client
ID in here, so you can go ahead and
search for CLIENT-ID. And it's uppercase CLIENT-ID. And you'll
see here again that the CLIENT-ID is just a,
a placeholder. So you're going to need to put
your client ID right here. And again, that's a
client ID that you get from the developers console.
Here it's being used for the client ID to
identify itself during the authentication process. So, here's my
client ID and then of course, save it. And
it hasn't mattered until now that the client ID wasn't
set here because we haven't been using the webpages
in the Conference Central application to test our functions. I
think if you try to log in using the
webpages, you will have found that it didn't work because
it didn't have its CLIENT_ID set. Another thing you
need to make sure is that your consent screen
has a product name. So again, you'd go to
your project in the developers console, go to APIs &
auth. Then you click Consent screen here, down here.
And then first thing you see is it shows you
what your consent screen would look like. And this
is the screen that gets shown to users when they
go to use your application. And you do need to
scroll down. Don't be put off that it's a little
bit faded. Just go ahead and scroll down. The email
address does need to have a value. And then specify
a product name for your application, basically your application name.
Okay, one last thing you need to do is to
add the JavaScript Cross-Origin in the client application. So for
this, you're going to go back to the credentials screen in
the developer console, and your client ID for
web application. You're going to add your JavaScript origins.
So click Edit Settings. Make sure you're in the
right box for JavaScript Origins and then you need
to add two here. You need to add the URL for where your app is when it's
running on appspot and you need to add the
URL for localhost. You'd go ahead and add those.
If your app running on appspot, you do
need to specify HTTPS for secure connection. For the
app running on localhost, it's just HTTP, because
the dev server running on localhost doesn't support HTTPS.
So you go ahead and you add those and you say Update, and basically what this is
doing is it's giving permission to these URLs
to run JavaScript to access your app. And you
need to do this even though this is the app itself, right?
I'm in here. My app is cake-hut and I'm giving permission to cake-hut
to run JavaScript to access cake-hut. And after you've done all of
these things, you should find that the My Profile page works for you.