Integrating With OAuth Exercise

Integrating with OAuth
OutSystems Inc. 5
901 Peachtree Dunwoody Road, N.E. Building C, Suite 495, Atlanta, GA 30328 1
Table of Contents
Table of Contents 2
Introduction 3
Connect to an Environment 4
Get to know the scenario 6

Install the Employee application 6
Business Case Overview 6
Employee App Registration in Google APIs 7
Integrate with Google REST Web Services 14
Google Authorization Page 21
Get Access Token 24
Login in the Employee App 29
Challenge 39
End Lab 40
OAuth 2.0 Related Remarks 40
OutSystems Inc. 5
Introduction
In this session, we are going enable the Google sign-in feature on a web application. The
scenario for this Lab consists of one web application: the Employees a
pplication. This
application centralizes information about employees and makes it available to the whole
organization. By the end of this Lab, users will be able to sign in the Employees application
using their own Google accounts.
While developing the Google sign-in feature, we will use a Google REST API in order to
implement OAuth authorization (learn more here). Also, we will integrate the user Google
accounts with the OutSystems built-in end-user management system, allowing to benefit from
OutSystems security features such as Roles.
OutSystems Inc. 5
Connect to an Environment
When we open Service Studio for the first time, we will need to connect to an environment
where the OutSystems platform server generates, optimizes, compiles, and deploys
OutSystems applications.
1) Open Service Studio and access the Connect to Environment d

ialog. This can be done
in two ways.
a) If you are not logged in to any environment, click on C

onnect to Environment.
b) If you are already logged in to an environment, select the Switch Environment...

option from the Environment menu at the top.
2) Connect to your OutSystems personal environment.
a) If you are using your Personal Environment, you can find its address in the
OutSystems website and log in.
b) Under the Platform tab and then under the P

ersonal Environment tab the
environment address (or S
erver Address) can be found.
OutSystems Inc. 5
c) Back in Service Studio, use that Environment and login with your OutSystems
community email (username) and password.
OutSystems Inc. 5
Get to know the scenario
Install the Employee application

Open and publish the E
mployees (OAuth Exercise).oap in your personal environment. The
oap file can be found in the Resources folder.
1) In the Applications, open the Environment menu and select Open Files…
2) In the Open dialog, change the File Type dropdown option to OutSystems Application
Pack (*.oap) and then open the Employee (Integration Lab).oap.
3) Click Proceed when asked.
4) Wait for the installation to complete and then proceed.
Business Case Overview

The Employee application centralizes employee information and makes it available to the entire
organization. The application has one module, Employees_OAuth, containing all the Entities,
Roles, logic and Screens that the app needs to work properly.
The Employees application shows the job role, contact information and location of each
Employee. Also, depending on the Role of the user, the information may or may not be
editable. The three Roles are: HRManager, TeamLead a
nd Employee. Every user with the
HRManager role can edit the information about employees and team leads.
Let’s try the application!
1) Open the Employees application, login as Emily Simon (using the sample users), open
the Detail Screen of one of the Employees and change one piece of information.
a) In Service Studio, open the Employee app using the O

pen in Browser button.
b) Login using the sample user Emily Simon (HRManager), present on the left side of
the login page.
c) Click on the Amy Peters employee, to open its Detail Screen.
d) On that Screen, you should see an Edit link. Click on it and change any bit of
information from the user. Confirm that the change was saved.
OutSystems Inc. 5
Employee App Registration in Google APIs
Before we start, for the OAuth 2.0 workflow to be successful, we need to register the Employees
application in the Google APIs service.
1) Let’s start by creating a new project in the Google API Console
a) Open the https://console.developers.google.com.
b) Login with your Google Account.
NOTE: In the context of enterprise project, an enterprise account should be used,

and the credentials may even have to be request to a specific person inside the
company.
c) Click on the P
rojects dropdown menu, which is going to open a popup window
to select and create new projects.
d) Click on the N
ew Project button.
e) Set the project name to O

Auth Integration Exercise and click on the Create button.
OutSystems Inc. 5
f) Make sure the O
Auth Integration Exercise project is the one selected in the main
page.
2) Now that we have a project defined, we can register the Employees application with the
Google APIs service. This is done through a registration form, where the following
information needs to be provided: the application name and the Redirect URI. The
Redirect URI is the URL to which the Google’s authorization server will redirect users,
after they authorize access to their Google account.
OutSystems Inc. 5
a) Click on the C
redentials menu entry.
b) Click on the O
Auth consent screen tab.
c) In the Application name input field, type in E

mployees App.
d) In the Authorized domains input field, type in the Server Address of your
environment. Click somewhere outside of the input field and then click on the
Save b
utton.
OutSystems Inc. 5
e) Click on the C
reate credentials dropdown button and select the option O
Auth
client ID.
f) Select the Web Application option as the application type.
g) In the Application name input field, type in E

mployees App as the name of the
application.
OutSystems Inc. 5
h) In the Authorized redirect URIs add the following URL: h
ttps://<Server
Address>/Employees_OAuth/GoogleCallback.aspx
Click somewhere outside of the input field then click on the C
reate b
utton.
i) The Google APIs will provide the credentials for the Employees application in the
form of a C
lient Id and a Client Secret. Save them in an accessible location since
we are going to need them and close the popup.
NOTE: The Client ID is a public identifier that is used by the Google APIs to check
the identity of our application. The C
lient Secret is used to authenticate the
identity of the Employees application to the Google APIs, when it requests access
to a user's account, and must be kept private between the Employees application
and the Google APIs Service.
OutSystems Inc. 5
3) Finally, we need to enable the Google People API in the OAuth Integration Exercise p
roject,
since the Employees application will use it to access to profile information of the
authenticated user.
a) Click on the L
ibrary m
enu entry.
b) Search for the Google People API and select it.
c) Click on the E
nable button.
4) The E
mployees_OAuth module has two Site Properties defined to store the C
lient Id
and t he Client Secret o
btained previously. Let’s begin by opening the Employee_OAuth
module and assigning the Client Id and the Client Secret Site Properties to the proper
values that were created with the Credential in the previous steps.
a) Open the Service Studio and click on the Employee_ILab module.
OutSystems Inc. 5
b) Switch to the Data tab, locate the Site Properties folder and expand it.
c) Select the ClientId Site P

roperty and change the default value to the Client Id
value in the Employee App Credentials.
NOTE: Site Properties values can also be changed at runtime in Service Center
(https://<server_address>/ServiceCenter). This allows operations team to set and
change values without the requiring code changes.
d) Select the ClientSecret Site Property and change his default value to the Client
Secret value from the Credentials.
e) Scopes are strings that enable access to particular resources, such as user data.
You include a scope in certain authorization requests, which then displays
appropriate permissions text in a consent dialog that is presented to a user.
Select the Scopes Site Property and change his default value to
"profile
email
https://www.googleapis.com/auth/user.birthday.read"
OutSystems Inc. 5
Integrate with Google REST Web Services
In OutSystems, integration with REST Services is easy. OutSystems help us to generate all the
methods and data structures needed to integrate with an external system.
We aim to enable the Google sign-in feature in the Employee application and there are different
ways to do it. In this Lab, we are going to use Google REST Services.
On one hand, the Employees application needs to request an access token from the Google’s
authorization server following the OAuth 2.0. On the other hand, the Employees application will
request access to the profile information about the user authenticated. Therefore, we need to
consume the two Google REST Services needed for the Google sign-in feature.
1) Consume the Google REST Service to obtain a valid access token. Detailed information
about this REST Service can be found in G
oogle Documentation.
a) Switch to the Logic tab and in the Integrations folder, right-click the R
EST element
and select C
onsume REST API.... This opens a window to configure the REST
methods that we want to consume.
b) On the new window, click the A

dd Single Method button.
c) Set the Method URL to
https://www.googleapis.com/oauth2/v4/token
d) Change the HTTP method to POST.
OutSystems Inc. 5
e) To help setting the request and response formats, let’s use as example the
sample snippets available in the G oogle Documentation. Set the R
equest as
follows.
code={code}&client_id={client_id}&
client_secret={client_secret}&
redirect_uri={redirect_uri}&
grant_type={grant_type}
f) Set the Response with the following sample response.
{
"access_token":"1/fFAGRNJru1FTz70BzhT3Zg",
"expires_in":3920,
"token_type":"Bearer",
"refresh_token":"1/xEoDL4iW3cxlI7yDbSRFYNG01kVKM2C-259HOF2aQbI"
}
g) Click on the O
K button.
OutSystems Inc. 5
h) Change the name of the created method to G
etToken.
2) Integrate with the Google REST service that obtains the user’s profile information. Due to
the shutdown of the Google+ APIs on March 7, 2019, we will use the People API to
OutSystems Inc. 5
retrieve profile information. Detailed information about this REST Service can be found
in G
oogle Documentation.
a) Switch to the Logic tab and in the Integrations folder, right-click the R
EST element
and select C
onsume REST API.... This opens a window to configure the REST
methods that we want to consume.
b) On the new window, click the A

dd Single Method button.
c) Set the Method URL to
https://people.googleapis.com/v1/people/me?personFields={personFields}
d) Under the Body tab, set the Response with the following sample response:
{ "resourceName": "people/123456789123456789123",
"etag": "%FDSJUrthFhFGDhrtydfg843nkdk",
"names": [
{ "metadata": { "primary": true, "source": { "type": "PROFILE", "id":
"123456789123456789123" } },
"displayName": "Neo",
"familyName": "OutSystems",
"givenName": "Neo",
"displayNameLastFirst": "OutSystems, Neo"
} ],
"photos": [ { "metadata": { "primary": true, "source": { "type": "PROFILE", "id":
"123456789123456789123" } }, "url":
"https://lh6.googleusercontent.com/-oASOAM0rLaBVk/BKSOS/FODSD/lew0z14P2ig/s10
0/photo.jpg" } ],
"birthdays": [ { "metadata": { "primary": true, "source": { "type": "PROFILE", "id":
"123456789123456789123" } }, "date": { "year": 2001, "month": 3, "day": 7 } } ],
"emailAddresses": [ { "metadata": { "primary": true, "verified": true, "source": { "type":
"ACCOUNT", "id": "123456789123456789123" } }, "value": "neo@outsystems.com" } ]
}
OutSystems Inc. 5
e) Switch to the Headers/Auth tab. Under the R
equest Headers add the
Authorization H
eader. This can be done by clicking on the combo box and then
the Authorization option can be selected.
f) Click on the O
K button.
g) Change the name of the method just created to G

etProfile.
h) Expand the GetProfile method, locate the personFields Input Parameter and set
the Is Mandatory attribute to True. This query parameter is Required by the get
method, as seen in the m
ethod documentation.
OutSystems Inc. 5
i) The Integrations folder should look like the following image.
OutSystems Inc. 5
Google Authorization Page
Now let’s start develop the logic needed to support the Google sign-in feature. When an
end-user opens the Employee application, the Login Screen is opened. An end-user can login
using a sample user or login with his own Google Account.
To login with a Google Account, the end-user clicks on the S

ign in with Google button. This
button was defined in the G
oogleLogin Web Block (under the Common UI Flow). When a user
clicks on the S
ign in with Google button, the Login Screen Action will be executed.
1) Define the Login Screen Screen Action to redirect the user to the Google authorization
page, with the list of requested permissions. Then, the user can decide whether to grant
the permissions to the Employee application. So let’s implement the Login Screen Action.
a) In the Interface tab of the Employees_OAuth, expand the Common UI Flow

located under the UI Flows folder, and locate the G
oogleLogin Web Block.
b) Expand the GoogleLogin Web Block and double click on the Login Screen Action
to open it in the canvas.
c) Drag and drop aD

estination statement over the Raise Exception statement.
OutSystems Inc. 5
d) In the Select Destination popup window, expand the Common UI Flow, select the
ExternalURL element and then click the OK button. The ExternalURL element
allows us to redirect users to a web page.
e) In the properties of the Common\ExternalURL statement, set the URL p

roperty to
"https://accounts.google.com/o/oauth2/auth?client_id=" + Site.ClientId +
"&redirect_uri=" +
MakeAbsoluteURL("/Employees_OAuth/GoogleCallback.aspx") + "&scope=" +
EncodeUrl(Site.Scopes) +
"&response_type=code&access_type=offline&approval_prompt=force"
NOTE: This is where the Employees application redirects the user to the Google
authorization web page along with the list of requested permissions. Then, the
user can decide whether to grant the permissions to the Employees application.
If the user authorizes the request, the Google’s authorization server will redirect
the user to the web page indicated on the r edirect_ui parameter, which is the one
that we registered (the Authorized redirect URIs) in Google APIs Service.
OutSystems Inc. 5
The MakeAbsoluteURL("/Employees_OAuth/GoogleCallback.aspx") instruction will be
translated to: https://<Server Address>/Employees_OAuth/GoogleCallback.aspx
2) Publish the application using 1-Click Publish button and verify that the publish
completed successfully in the 1-Click Publish Tab.
a) Click on the 1-Click Publish button to publish the module to the server.
b) Verify in the 1-Click Publish tab that the publishing process was successful.
c) Preview the app in browser by clicking on the Open in Browser button.
d) In case you are still logged in, log out.
e) In the Login web page, click on the S

ign in with Google button and check if you
are redirected to the Google authorization page.
NOTE: At this point, if you login with your Google Account you will see the Login
screen again. On the next section we will deal with the Callback to handle the
response obtained from Google after log in.
OutSystems Inc. 5
Get Access Token
When the user authorizes the request from the Google authorization web page, the Google’s
authorization server will redirect the user to the GoogleCallback Screen along with an
authorization code.
According to the Screen lifecycle of OutSystems web applications, when the user is redirected
to the GoogleCallback Screen, firstly, the Preparation will be executed. Therefore, the
Preparation of the GoogleCallback Screen is where the Employees application can request the
access token from the Google’s authorization server, along with the authorization code
received.
In our sample app, the GoogleCallback screen has already been created. Besides the logic that
will be created in this exercise, it is also important that the screen allows Anonymous access,
and has the required input parameters (Code).
1) Let’s implement the Preparation o

f the GoogleCallback Web Screen.
a) In the Interface tab, double-click the Preparation of the GoogleCallback W

eb
Screen to open it in the canvas.
b) Drag an If statement and drop it below the Start, and then set the Condition
property to
Code = “”
OutSystems Inc. 5
c) Drag and drop an End statement to the right of the If statement.
d) Create the True branch connector from the I f to the E

nd N
ode.
OutSystems Inc. 5
e) Switch to the Logic tab and locate the GoogleAuthentication Server Action under
the GoogleOAuth folder. The Google Authentication Server Action is not
implemented. It has one input parameter (Code) and one output parameter
(TokenInfo). This Action is going to encapsulate the logic required to get a valid
access token.
f) Drag the GoogleAuthentication Server Action and drop it on the False branch
that is connected to the MainFlow/Employees Destination.
g) Set the Code input parameter of the GoogleAuthentication S

erver Action to the
Code I nput Parameter of the GoogleCallback Web Screen.
OutSystems Inc. 5
2) Since the GoogleAuthentication S
erver Action is not implemented, let’s do it now.
a) In the Logic tab, double-click the G

oogleAuthentication S
erver Action to open it
in the canvas.
b) Drag and drop an I f statement to the flow of the GoogleAuthentication Server

Action below the Start statement and then set the Condition property to
Code = ""
c) Drag and drop an E

nd statement to the right of the If statement and create the
True b
ranch connector from the If to the End Node.
d) Drag and drop the GetToken REST Service on the False branch
e) Set GetToken REST Service Input Parameters as follows:
code: Code
client_id: Site.ClientId
client_secret: Site.ClientSecret
redirect_uri: MakeAbsoluteURL("/Employees_OAuth/GoogleCallback.aspx")
grant_type: "authorization_code"
f) Drag an Assign statement and drop it after the GetToken statement, then create
the following assignment
OutSystems Inc. 5
TokenInfo = GetToken.Response
g) The GoogleAuthentication’s flow should look similar to the following screenshot
d) In the Login web page, click on the S

ign in with Google button.
e) Notice that, you were redirected to the Google Login Screen instead of the
Employees Screen. Let’s move on in order to understand why.
OutSystems Inc. 5
Login in the Employee App
So far, we have created the logic to give the Employees application the valid access token that
gives access to personal information of the user signed in with a Google account. However, this
is not enough to authorize the user to access the Screens of the Employee application.
OutSystems has a built-in end-user management alongside with a role-based access control
approach. Roles can be used to restrict or allow end-users to access specific screens.
For example, in the Employees application, only the users with at least one of the Roles
(Employee, HRManager, TeamLead) will be able to access the Employees and EmployeeProfile
Screens. The Roles were defined under the Logic tab and can be seen in the Roles folder.
The information about applications’ users are maintained by the (System) Entity Users. Since
we want to enable the Google sign-in feature, in the Users Entity, we need to add, at runtime,
the user signed in with a Google account and then assign it the Employee Role.
1) Let’s complete the logic in the Preparation flow inside the GoogleCallback Web Screen.
a) In the Interface tab, double-click on the P

reparation of the GoogleCallback Web
Screen to open it in the canvas.
b) Switch to the Logic tab and locate the LoginUserWrapper Server Action under
the GoogleOAuth f older. The LoginUserWrapper Server Action is not
implemented, but it will contain the logic to add a new user in the User Entity and
assign the Employee Role to him.
c) Drag the LoginUserWrapper S

erver Action and drop it below the
GoogleAuthentication Server Action.
OutSystems Inc. 5
d) Set the LoginUserWrapper TokenInfo input parameter to
GoogleAuthentication.TokenInfo
2) The LoginUserWrapper Server Action is not implemented yet. It has one Input Parameter
(TokenInfo) and two Local Variables that are going to be helpful to create the Action.
Initially, we are going to get the user’s profile information associated to its Google
account.
a) In the Logic tab, double click on the L

oginUserWrapper Server Action to open it
in the canvas.
b) Drag the GetProfile R

EST API Method and drop it below the Start Node.
c) Set its Authorization input parameter to:
TokenInfo.Token_type + " " +

TokenInfo.Access_token
OutSystems Inc. 5
d) Assign the Site Property PersonFields to the personFields Input Parameter.
PersonFields is the parameter used to restrict which fields on the person are
returned by the method. The Site Property has a default value to allow retrieve
the person’s name, email address and birthday
"names,emailAddresses,birthdays"
3) Now, we need to add at runtime a new user in the Users Entity.
a) Switch to the Data tab and locate the User Entity under the (System) module.
b) Drag the User Entity and drop it just below the GetProfile call. This will create an
Aggregate, called G
etUsers, that fetches all the users from the database.
OutSystems Inc. 5
NOTE: We need to filter the GetUsers A
ggregate to understand if the Google user
that is currently authenticated already was added to the Entity. To do this, we are
going to use the email obtained from the call made to the GetProfile REST
Service.
c) Double-click on the G
etUsers Aggregate to open its editor on the canvas, and
then select the Filters tab.
d) Under the Filters tab, click on +Add Filter link in order to filter the Aggregate.
e) In the Filter Condition window, add the following expression:

User.Email = GetProfile.Response.EmailAddresses.Current.Value
h) Click on the B
ack b
utton in order to return to the LoginUserWrapper Server
Action in the canvas again.
i) Drag an Assign statement and drop it after the G

etUsersByEmail A
ggregate, and
make the following assignments:
GetUsersByEmail.List.Current.User.Name
= GetProfile.Response.Names.Current.DisplayName
GetUsersByEmail.List.Current.User.Username
OutSystems Inc. 5
= GetProfile.Response.EmailAddresses.Current.Value
GetUsersByEmail.List.Current.User.Email
= GetProfile.Response.EmailAddresses.Current.Value
GetUsersByEmail.List.Current.User.Is_Active
= True
GetUsersByEmail.List.Current.User.External_Id
= GetProfile.Response.Names.Current.Metadata.Source.Id
j) Switch to the Data tab and locate the User Entity under the (System) module and
expand it.
k) Drag the CreateOrUpdateUser E

ntity Action below the previous Assign.
OutSystems Inc. 5
l) Set its S
ource property to
GetUsersByEmail.List.Current.User
4) We have just created a new user, or updated an existing one. Now we can add the
necessary logic to add the authenticated user as an Employee of the organization.
a) Drag an Aggregate a
nd drop it after C
reateOrUpdateUser.
b) Double-click the Aggregate1 just created to open the aggregate interface.
c) Switch to the Data tab, locate the Employee Entity and drag it in the aggregate.
d) Under the Filters tab, click on +Add Filter link in order to filter the Aggregate.
e) In the Filter Condition window, add the following expression:

Employee.UserId = CreateOrUpdateUser.Id
f) Click on the B
ack b
utton in order to return to the LoginUserWrapper Server
Action in the canvas again.
g) Drag an Assign statement and drop it after G

etEmployeeByUserId, and make
the following assignments. Notice that, we are using the Employee Local Variable
to build an Employee Record, which will be stored in the Employee Entity.
OutSystems Inc. 5
GetEmployeeByUserId.List.Current.Employee.UserId = CreateOrUpdateUser.Id
GetEmployeeByUserId.List.Current.Employee.DateOfBirth = NewDate(
LongIntegerToInteger(GetProfile.Response.Birthdays.Current.Date.Year),
LongIntegerToInteger(GetProfile.Response.Birthdays.Current.Date.Month),
LongIntegerToInteger(GetProfile.Response.Birthdays.Current.Date.Day))
h) Switch to the Data tab and locate the Employee Entity and expand it.
i) Drag the CreateOrUpdateEmployee Entity Action below the last assign

statement, and set its S
ource property to the E
mployee Local Variable.
5) In order to allow the new user to open the Employees and EmployeeDetail Screens, we
need to grant him the Employee Role.
a) In the Logic tab, expand the Roles folder and then expand the E
mployee Role.
b) Drag the GrantEmployeeRole Server Action and drop it before the End of the
LoginUserWrapper Action.
OutSystems Inc. 5
c) Set G
rantEmployeeRole input parameter to: C
reateOrUpdateUser.Id
6) Finally, we have to authenticate the Google authenticated user in the OutSystems

built-in end-user management.
a) Drag and drop a Run Server Action below the GrantEmployeeRole statement.
OutSystems Inc. 5
b) Search for the L
ogin Server Action and select the one under the (System)
module.
c) Set the UserId i nput parameter to CreateOrUpdateUser.Id and the Persistent

input parameter to F alse.
NOTE: Note that an “Unexpected Login” warning is raised to ensure that you’re
not creating a security breach. We can ignore it, as this is a specific use case and
isolated flow.
d) In the Login web page, click on the S

ign in with Google button.
e) Check if you’re able to access in the Employees Screen.
OutSystems Inc. 5
Challenge
Let’s assume that we want to use the Google user’s profile picture as his Employee Picture in
the Employee application. So when someone signs-in with his Google Account, the Google
profile picture should be stored and displayed like shown in the figure below.
To accomplish that, we need to add some code to the L

oginUserWrapper Server Action. First,
notice that, there is a E
mployeePicture Entity which has an one to one relationship with the
Employee Entity. So after we add or update an Employee record, we can update his picture.
Moreover, in the result of the GetProfile REST API Method we have an URL from which we can
download the Google user’s profile picture (be aware that the photos were not specified in the
Field Mask defined by the P
ersonFields Site Property).
1) Use the GetRequest_Submit Server Action to download an image from an URL. This
Server Action is defined in the H
TTPRequestHandler module. Help: I n the A
rguments
parameter of the GetRequest_Submit use the empty string " " s ince the image URL
doesn’t have input parameters.
2) In the LoginUserWrapper t here is a Local Variable named EmployeePicture. Use it to

create a temporary record that should contain the image downloaded and the identifier
of the Employee in the Employee Entity.
3) Use the CreateOrUpdateEmployeePicture Entity Action to save the picture in the

database server.
4) The LoginInfo Web Block already has the logic and UI implemented to fetch the image
from the database, and display it if it exists.
OutSystems Inc. 5
End Lab
In this lab, we enable the Google sign-in feature in the Employee application. Since Google APIs
use the OAuth 2.0 protocol for authentication, we follow it to authorize the Employee
application to use the Google People API.
To accomplish that, firstly, we have integrated with two REST Services from Google. One to
request an access token from Google’s authorization server. The other one gets the Google
user’s profile information such as name, email, profile picture, birth date.
Once we had integrated with the needed REST Services, we implemented the OAuth 2.0
authorization protocol, so that the Employees application could access to the user’s profile
information when he signs-in with his Google account.
Once the OAuth authorization is completed, we used the Google user’s profile information to
integrate with the OutSystems end-user management. This was needed because the Employees
and EmployeeDetail Screens require the Employee Role.
OAuth 2.0 Related Remarks
Every time a user signs-in with his Google account, he needs to grant permissions to the
Employee application even if he had logged in, in the past. However, this can and should be
avoided using the Refresh Token.
Notice that, the GetToken REST Method returns not only an access token but also an expiration
time, and a refresh token. A refresh token allows an application to request a new access token
without having to re-authenticate the user. So, we should use the access token while it’s valid (it
didn’t expire) and whenever the access token expires, we should request a new access token
using the refresh token.
OutSystems Inc. 5

Integrating With OAuth Exercise

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Integrating With OAuth Exercise

Uploaded by

Copyright:

Available Formats

Integrating with OAuth

Get to know the scenario 6

Employee App Registration in Google APIs 7

Integrate with Google REST Web Services 14

Google Authorization Page 21

Get Access Token 24

Login in the Employee App 29

1) Open Service Studio and access the ​Connect to Environment d

a) If you are not logged in to any environment, click on C

b) If you are already logged in to an environment, select the ​Switch Environment...

2) Connect to your OutSystems personal environment.

b) Under the ​Platform​ tab and then under the P

Install the Employee application

3) Click Proceed when asked.

4) Wait for the installation to complete and then proceed.

Business Case Overview

Let’s try the application!

a) In Service Studio, open the Employee app using the O

c) Click on the Amy Peters employee, to open its Detail Screen.

1) Let’s start by creating a new project in the ​Google API Console

a) Open the ​https://console.developers.google.com​.

b) Login with your Google Account.

NOTE​: In the context of enterprise project, an enterprise account should be used,

e) Set the project name to O

c) In the Application name input field, type in E

f) Select the ​Web Application​ option as the application type.

g) In the Application name input field, type in E

b) Search for the Google ​People API​ and select it.

a) Open the Service Studio and click on the ​Employee_ILab​ module.

c) Select the ​ClientId Site P

b) On the new window, click the A

c) Set the Method URL to

d) Change the HTTP method to POST.

b) On the new window, click the A

c) Set the Method URL to

g) Change the name of the method just created to G

To login with a Google Account, the end-user clicks on the S

a) In the Interface tab of the Employees_OAuth, expand the ​Common UI Flow

c) Drag and drop aD

e) In the properties of the Common\ExternalURL statement, set the ​URL p

c) Preview the app in browser by clicking on the ​Open in Browser​ button.

d) In case you are still logged in, log out.

e) In the Login web page, click on the S

1) Let’s implement the Preparation o

a) In the Interface tab, double-click the Preparation of the ​GoogleCallback W

d) Create the True branch connector from the I​ f ​to the E

g) Set the Code input parameter of the ​GoogleAuthentication S

a) In the Logic tab, double-click the G

b) Drag and drop an I​ f​ statement to the flow of the GoogleAuthentication Server

c) Drag and drop an E

e) Set GetToken REST Service Input Parameters as follows:

g) The GoogleAuthentication’s flow should look similar to the following screenshot

c) Preview the app in browser by clicking on the ​Open in Browser​ button.

d) In the Login web page, click on the S

a) In the Interface tab, double-click on the P

c) Drag the ​LoginUserWrapper S

a) In the Logic tab, double click on the L

b) Drag the ​GetProfile R

c) Set its Authorization input parameter to:

TokenInfo.Token_type + ​" " +

3) Now, we need to add at runtime a new user in the Users Entity.

e) In the Filter Condition window, add the following expression:

i) Drag an ​Assign​ statement and drop it after the G

1) Open Service Studio and access the Connect to Environment d

b) If you are already logged in to an environment, select the Switch Environment...

b) Under the Platform tab and then under the P

1) Let’s start by creating a new project in the Google API Console

a) Open the https://console.developers.google.com.

NOTE: In the context of enterprise project, an enterprise account should be used,

f) Select the Web Application option as the application type.

b) Search for the Google People API and select it.

a) Open the Service Studio and click on the Employee_ILab module.

c) Select the ClientId Site P

a) In the Interface tab of the Employees_OAuth, expand the Common UI Flow

e) In the properties of the Common\ExternalURL statement, set the URL p

c) Preview the app in browser by clicking on the Open in Browser button.

a) In the Interface tab, double-click the Preparation of the GoogleCallback W

d) Create the True branch connector from the I f to the E

g) Set the Code input parameter of the GoogleAuthentication S

b) Drag and drop an I f statement to the flow of the GoogleAuthentication Server

c) Preview the app in browser by clicking on the Open in Browser button.

c) Drag the LoginUserWrapper S

b) Drag the GetProfile R

TokenInfo.Token_type + " " +

i) Drag an Assign statement and drop it after the G

k) Drag the CreateOrUpdateUser E

b) Double-click the Aggregate1 just created to open the aggregate interface.

g) Drag an Assign statement and drop it after G

i) Drag the CreateOrUpdateEmployee Entity Action below the last assign

c) Set the UserId i nput parameter to CreateOrUpdateUser.Id and the Persistent

c) Preview the app in browser by clicking on the Open in Browser button.

2) In the LoginUserWrapper t here is a Local Variable named EmployeePicture. Use it to

3) Use the CreateOrUpdateEmployeePicture Entity Action to save the picture in the