juancarlosllh / course-builder-gitkit-setup-guide Goto Github PK

Under *Overview* you'll see a search bar. Just type `Identity Toolkit API` and it will appear.
Click on it and then click on `Enable API`.
For now just leave it that way.

Now, on the left side menu select `Credentials`.
Then click the blue button that says `Add credential` and select `API Key` from the dropdown list.

In the popup, select `Browser key`.
A form will show up. Here you can leave the default *Name*.

In the *Accept requests from these HTTP referrers* field you must write your app's domain followed by an asterisk.

Example: `https://my_coursebuilder_site.appspot.com/*`

If you are running your tests locally you probably also want to add `http://localhost:8080/*` to that list.

*If you find any problem, you can also leave this field blank or write `https://*.appspot.com/*`. This makes the website less secure.*

Then click on `Create` and a token will be displayed. **COPY** that token and go to your cousebuilder dashbard again, to the `Site admin > Site settings` page, and paste it in the `GITKit module browser API key` field (again, remember to set the status to **Active** before saving).

~~~ *Field 2/4* ~~~

Go back to the developpers page and click on `add credentials` again. 
This time though you must select the option `API key > Server key`.

Here you can leave all the field with the default values and click `Create`right away.

A new token will apear. *COPY* it, go to your coursebuilder `Site settings` and paste it in the `GITKit module server API key` field.  

~~~ *Field 3/4* ~~~

Back in the developpers page and click on `add credentials` for a third time. But now select `OAuth 2.0 client ID` from the dropdown.

It might show you a warning telling you to set a product name: 
![](https://dl.dropboxusercontent.com/u/34394156/images/coursebuilder/Captura%20de%20pantalla%202015-11-14%20a%20las%203.00.09.png)
Just follow the steps and you will be back there when the name is set. 

Example using my course name:
![](https://dl.dropboxusercontent.com/u/34394156/images/coursebuilder/Captura%20de%20pantalla%202015-11-14%20a%20las%203.01.36.png)

Now select `Web application`from the list.
A form will appear, you can leave the default `Name`.

In the field `Authorized JavaScript origins` you just have to write your site's main url:
`https://my_coursebuilder_site.appspot.com` (and/or localhost if you are running in local).

In the field `Authorized redirect URIs` you have to write your url followed by the string `/modules/gitkit/widget`

Example:
`https://my_coursebuilder_site.appspot.com/modules/gitkit/widget`

Click on `Create` and *COPY* the *Client ID* (just where it says *Here is your client ID*).

Finally, click on `Download JSON` and save the file cliente_secret_xxxxxxx-xxxxxx.json, we will use it later.

Go back to your coursebuilder `Site settings` and paste it in the field `GITKit module client ID`.

~~~ *Field 4/4* ~~~

For the final field, go to your developpers page and click on `add credentials` (yes... AGAIN!!! @_@' ).

Now select the option `Service account` from the dropdown. Then select `JSON` as the *Key type* and click on `Create`.
This will download a .json file to your computer, you can save it somewhere safe, but what you need to do is *OPEN* it with any text editor and *COPY* its content.

Then, go back to your coursebuilder `Site settings` and paste all that in the field `GITKit module service account JSON`

!!! REMEMBER AGAIN that whenever you save a variable you have to set it's status to **Active** or it will not make any difference.

OK! So now you have all the variables that you needed, hurray!!!

**BUT WAIT! There are still a few things you must do!**

~~~ *Put it all together* ~~~

Go back to your developpers page one LAST time.

In the left side menu select `Overview`, then under the title select the tab named `Enabled APIs` and click in the small black *COG* icon that appears nex to `Identity Toolkit API`.

We must now complete that form.
In the first field `Widget URL` you must select the only option that shows up in the dropdown (that's an easy one).

In the `Sign-in success URL` field you can write your url followed by the string `/modules/gitkit/widget`

Example:
`https://my_coursebuilder_site.appspot.com/modules/gitkit/widget`

And in the `Sign-out URL` you can write the same thing.

Then, in the *Providers* list, check the services that you want your users to be able to log in.
In the *Google* provider you must set the 'Rollout'. You can just set it to 100%.

*Note that if you select any provider other that Google you'll have to provide the credentials for that service. We will not cover that in this guide but it's quite easy, believe me!*

Click on the `Save` button.

Finally, you have to edit the file client_secrets.json from OAuth2 module (coursebuilder_directory/modules/oauth2/client_secrets.json) and replace it's content with the file you downloaded before when created the `OAuth 2.0 client ID` credential.


###3 - Almost there!!! (The satisfaction)

We're almost finished, I promise!!!
The only thing we need to do now is activate the **gitkit** login module.

For this, open the file `config.yaml` that you can find in `your_project_dir/modules/gitkit/resources/`

**NOW** you can set the the `enabled` field to `True`!!!

![](https://dl.dropboxusercontent.com/u/34394156/images/coursebuilder/Captura%20de%20pantalla%202015-11-14%20a%20las%203.29.15.png)

And now **DEPLOY** your project (or run it locally).

Go to your site and test it by **Login**, you will see a page similar to this one:

![](https://dl.dropboxusercontent.com/u/34394156/images/coursebuilder/Captura%20de%20pantalla%202015-11-14%20a%20las%204.32.26.png)

I guess frome here you're good to go on your own. 

**LUCK**!!!