There are two important aspects for any application that you build - Authentication and User Personalization.
If you take authentication on online platforms, the support for Social login is common now. The users can login to the online portal using their Google or Facebook accounts. This method of authentication is beneficial both for online portals and end users. There is no need to create a separate account on every online portal for end-users. This leads to increased consumption for online portals. The trust in the security provided by social media login has been increasing too.
The second aspect is user personalization. Many online portals have vast amount of information. The end user is interested only in certain areas of the information. User personalization can make the portal more consumable for an end user. Let us take the example of a online news portal. The news can be from the area of Politics, Entertainment, Science, Technology, Sports or Finance. An end user who is interested in Sports will have to filter through many articles before reading the article of interest. Here, user personalization can do the filtering task and present articles in the end users areas of interest.
In this code pattern, you will build an online financial news portal with social login and user personalization with AppID. The news portal will source articles from Discovery News collection. The end user can log in using their existing Google or Facebook accounts. After login, the user builds a profile specifying the areas of interest like Equity, Mutual Funds etc. The application filters the news content based on user profile and presents it to the end user for consumption.
When the reader has completed this Code Pattern, they will understand how to:
- Add social login to an application with AppID
- Build user profile with AppID
- Get financial news from discovery news collection using Discovery query language
- Add user personalization to filter news articles based on user profile
- User accesses the
App UIrendered by theFront-Endservice - The
App UIsends the request to theFront-Endservice - The
Front-Endservice fetches the finance news fromNewsservice. TheNewsservice sources the news fromWatson Discovery Newswhich is displayed on theApp UI - User logins to the portal through the
Front-endservice using social sign-in powered by App ID - User sets preferences through the
Front-endservice which invokes theUser managementservice with the preferences - The
User managementservice then sets the user profile on App ID - After sign-in, the
Front-Endservice invokes theNewsservice for finance news - The
Newsservice retrieves the user's profile and preferences - The
Newsservice returns personalized news sourced fromWatson Discovery Newsbased on the user's profile - User can update his preferences and then application shows personalized news based on the new preferences
- IBM Cloud account: Create an IBM Cloud account.
- Install ibmcloud CLI
- OpenShift Cluster: You should have one OpenShift cluster, if you want to deploy your application on OpenShift.
- Install oc CLI
Please follow the below to setup and run this code pattern.
- Get the code
- Create IBM Cloud Services
- Configure App ID
- Deploy Application
4.1 Deploy on Cloud Foundry
4.2 Deploy on OpenShift - Access your application and analyze the results
Clone the repository using the below command.
git clone https://github.com/IBM/secure-and-personalize-your-app-using-appid.git
You can create the service by either using the IBM Cloud console(Section 2.11) or the IBM Cloud CLI(Section 2.12).
Login to IBM Cloud .
Click on Catalog in top menu bar. Under IBM Cloud products search for Discovery. Click on Discovery tile that gets listed.
Select Lite plan, if not already selected, then click Create to create an instance of Watson Discovery service. When Discovery instance is created in a minute or two, store Service credentials in a text file. Please make a note of the apikey and url. This will be required later to configure the application.
Skip this section if you already created the Discovery service from IBM Cloud console as described in the previous section.
Run the below commands to create the Discovery service:
ibmcloud login [--sso]
ibmcloud resource service-instance-create my-discovery discovery lite [region]
Note: Replace the placeholder for region(e.g: us-east) before running the command. Also, note the GUID of the service. It will be required in the next step.
Run the below command to create a service key:
ibmcloud resource service-key-create skey --instance-id [GUID of Discovery]
Note: Replace the placeholder for GUID noted earlier before running the command.
The output from the command will contain the credentials as shown below. Please make a note of the apikey and url. This will be required later to configure the application.
Name: skey
ID: crn:v1:bluemix:public:discovery:us-east:a/96xxxx82:resource-key:38xxxxb5
Created At: Tue Jan 5 06:09:04 UTC 2021
State: active
Credentials:
apikey: WtxxxxtT
iam_apikey_description: Auto-generated for key 38xxxxb5
iam_apikey_name: skey
iam_role_crn: crn:v1:bluemix:public:iam::::serviceRole:Writer
iam_serviceid_crn: crn:v1:bluemix:public:iam-identity::a/96xxxxa6::serviceid:ServiceId-2cxxxx7a
url: https://api.us-east.discovery.watson.cloud.ibm.com/instances/2axxxx82
You can create the service by either using the IBM Cloud console(Section 2.21) or the IBM Cloud CLI(Section 2.22).
Login to IBM Cloud.
Click on Catalog in top menu bar. Under IBM Cloud products search for App ID. Click on App ID tile that gets listed.
Select Lite plan, if not already selected, then click Create to create an instance of App ID. When App ID instance is created, make a note of service credentials. If service credentials are not available by default, you can create new credentials as shown.
Store Service credentials in a text file. Please make a note of the tenantId, secret profilesUrl, oauthServerUrl and clientId. This will be required later to configure the application.
Skip this section if you already created the App ID service from IBM Cloud console as described in the previous section.
Run the below commands to create the App ID service:
ibmcloud resource service-instance-create my-appid appid lite [region]
Note: Replace the placeholder for region(e.g: us-east) before running the command. Also, note the GUID of the service. It will be required in the next step.
Run the below command to create a service key:
ibmcloud resource service-key-create skey --instance-id [GUID of App ID]
Note: Replace the placeholder for GUID noted earlier before running the command.
The output from the command will contain the credentials as shown below. Please make a note of the tenantId, secret profilesUrl, oauthServerUrl and clientId. This will be required later to configure the application.
Name: skey
ID: crn:v1:bluemix:public:appid:us-east:a/96xxxx73:resource-key:65xxxx9d
Created At: Tue Jan 5 04:45:41 UTC 2021
State: active
Credentials:
apikey: dBxxxx7k
appidServiceEndpoint: https://us-east.appid.cloud.ibm.com
clientId: 65xxxx9d
discoveryEndpoint: https://us-east.appid.cloud.ibm.com/oauth/v4/3cxxxx73/.well-known/openid-configuration
iam_apikey_description: Auto-generated for key 65xxxx9d
iam_apikey_name: skey
iam_role_crn: crn:v1:bluemix:public:iam::::serviceRole:Writer
iam_serviceid_crn: crn:v1:bluemix:public:iam-identity::a/96xxxxa6::serviceid:ServiceId-a0xxxx00
managementUrl: https://us-east.appid.cloud.ibm.com/management/v4/3cxxxx73
oauthServerUrl: https://us-east.appid.cloud.ibm.com/oauth/v4/3cxxxx73
profilesUrl: https://us-east.appid.cloud.ibm.com
secret: OTxxxxYx
tenantId: 3cxxxx73
version: 4
Access the App ID service instance using IBM Cloud dashboard. Select Manage Authentication in left panel menu. It shows the list of Identity Providers. We are using social sign-in using Facebook and Google only in this code pattern, hence disable other identity providers except Facebook and Google. The changes will get saved automatically.
Next, go to Login Customization in left panel menu. Using this you can customize your login page.
Upload Logo. You can choose any image of your choice as a logo of your login page. In this code pattern, App ID logo itself is being used and provided for your ease in images folder of the repository.
Header Color. You can choose any color for the header or provide hex code of the color directly. For example, give hex color code as #181818 for black color header.
Tab Name. You can add any name as tab name of your choice.
Once done, click on Save Changes.
The application can be deployed on a IBM Cloud Foundry runtime or OpenShift cluster on IBM Cloud.
Please refer Section 4.1 to deploy the application on Cloud Foundry.
Please refer Section 4.2 to deploy the application on OpenShift.
Login to IBM Cloud using the following command.
ibmcloud login [--sso]
The User management service needs to be configured to access the App ID service to store and access user profiles.
Run the below commands to create the environment file:
$ cd user-management-service
$ cp .env.sample .env
Now, edit the environment file(.env) and update with appropriate values(as shown below) that you noted earlier during creation of App ID service.
OAUTH_SERVER_URL=https://us-east.appid.cloud.ibm.com/oauth/v4/3cxxxx73
TENANT_ID=3cxxxx73
PROFILES_URL=https://us-east.appid.cloud.ibm.com
Run the below command in the user-management-service folder to deploy the service:
$ ibmcloud cf push <name>
Note: Replace the place holder for [name] with a name(e.g. user-management-service) for the service.
Run the below command to get the deployed application URL:
$ ibmcloud cf apps
Make a note of this URL. This is needed to configure the other services.
The News service needs to be confgured to access the Discovery service and the User management service.
Run the below commands to create the environment file:
$ cd news-api-service
$ cp .env.sample .env
Now, edit the environment file(.env) and update with appropriate values(as shown below) from the credentials data noted during creation of Discovery service, and the User management service url.
DISCOVERY_IAM_URL=https://iam.bluemix.net/identity/token
DISCOVERY_IAM_APIKEY=WtxxxxtT
DISCOVERY_URL=https://api.us-east.discovery.watson.cloud.ibm.com/instances/2axxxx82
ENVIRONMENT_ID=system
COLLECTION_ID=news-en
DISCOVERY_API_VERSION=2019-02-28
USER_MGMT_SERVICE_URL=http://user-management-service-xxxx.mybluemix.net/user-preferences
Run the below command in the news-api-service folder to deploy the service:
$ ibmcloud cf push <name>
Note: Replace the place holder for [name] with a name(e.g news-service) for the service.
Run the below command to get the deployed application URL:
$ ibmcloud cf apps
Make a note of this URL. This is needed to configure the other services.
The Front end service needs to be configured to access the App ID service, User management service and News service.
Run the below commands to create the environment file:
$ cd front-end-service
$ cp .env.sample .env
Edit the environment file(.env) and update with appropriate values(as shown below) of App ID credentials, and URLs of User management and News services.
// APP ID callback URL
CALLBACK_URL = "/callback"
//Backend Services URL
NEWS_SERVICE_URL = "http://news-service-xxxx.mybluemix.net/generic-news"
PERSONALISED_NEWS_URL = "http://news-service-xxxx.mybluemix.net/personalized-news"
USER_MGMT_SERVICE_URL = "http://user-management-service-xxxx.mybluemix.net/user-preferences"
CHECK_USER_PREFERENCES_URL = "http://user-management-service-xxxx.mybluemix.net/is-user-preferences-set"
//APP ID Credentials
TENANT_ID = "3cxxxx73"
CLIENT_ID = "65xxxx9d"
SECRET = "OTxxxxYx"
OAUTH_SERVER_URL = "https://us-east.appid.cloud.ibm.com/oauth/v4/3cxxxx73"
PROFILES_URL = "https://us-east.appid.cloud.ibm.com"
Navigate to the directory front-end-service.
$ cd front-end-service
$ ibmcloud cf push <name>
## Get your application URL
$ ibmcloud cf apps
Note: Replace the place holder for [name] with a name(e.g front-end-service) for the service. Make a note of this Front End Service application URL. This is needed in next step.
Go to IBM Cloud dashboard -> Services -> <your AppID service> -> Manage Authentication.
Select Authentication Settings and in Add web redirect URLs section, add the following URL.
https://<front-end-service-application-url>/callback
Note: Replace the placeholder [front-end-service-application-url] with the
Front endservice URL noted earlier.
Now you are all set to access your application using the Front end service URL.
Login to OpenShift. From the IBM Cloud console go to Clusters > Your OpenShift Cluster > OpenShift web console. From the OpenShift web console click the menu in the upper right corner (the label contains your email address), and select Copy Login Command. Click on Display token and paste the command into a terminal session. For example:
oc login --token=xxxx --server=https://xxxx.containers.cloud.ibm.com:xxx
Please refer to Section 4.1.1.1 to configure the service.
Run the below commands in the user-management-service folder to deploy the service:
$ cd user-management-service
$ oc new-app --name=<app-name> .
$ oc start-build <app-name> --from-dir=.
## build status can be checked using following command
$ oc logs -f bc/<app-name>
## app deployment status can be checked using below command
$ oc status # it should show that 1 pod is deployed for your app
$ oc expose svc/<app-name>
$ oc get routes <app-name> ## copy full route for next step
Note: Replace the placeholder [app-name] with a name(e.g: user-mgmt-service) for your service.
Make a note of this User Management Service application URL. This is needed in below steps.
Please refer to Section 4.1.2.1 to configure the service.
Run the below commands in the news-api-service folder to deploy the service:
$ cd news-api-service
$ oc new-app --name=<app-name> .
$ oc start-build <app-name> --from-dir=.
## build status can be checked using following command
$ oc logs -f bc/<app-name>
## app deployment status can be checked using below command
$ oc status # it should show that 1 pod is deployed for your app
$ oc expose svc/<app-name>
$ oc get routes <app-name> ## copy full route for next step
Note: Replace the placeholder [app-name] with a name(e.g: news-service) for your service. Make a note of the service URL. This is needed to configure the other services.
Please refer to Section 4.1.3.1 to configure the service.
Run the below commands in the front-end-service folder to deploy the service:
$ cd front-end-service
$ oc new-app --name=<app-name> .
$ oc start-build <app-name> --from-dir=.
## build status can be checked using following command
$ oc logs -f bc/<app-name>
## app deployment status can be checked using below command
$ oc status # it should show that 1 pod is deployed for your app
$ oc expose svc/<app-name>
$ oc get routes <app-name> ## copy full route for next step
# this route will be used by AppID for callback URL, so lets update deployment config before accessing the application
$ oc set env dc/<your-app-name> APPLICATION_URL=http://<your-application-route>
Note: Replace the placeholder [app-name] with a name(e.g: front-end-service) for your service.
Make a note of the service URL. This is needed in next step.
Go to IBM Cloud dashboard -> Services -> <your AppID service> -> Manage Authentication.
Select Authentication Settings and in Add web redirect URLs section, add the following URL.
http://<your-application-route>/callback
Now you are all set to access your application.
Note: Hybrid mode of deployment (some services on Cloud foundry and some on OpenShift) is also possible. You can choose the deployment strategy as per your requirement.
You can access the deployed application with the front end service URL on any browser. You can explore the application as shown in the below video.
In this application,
- The generic
Newsservice returns top 10 finance news of the last three days. This configuration can be changed inNewsservice. - This application uses only Facebook and Google sign-in. The other ways of authentication can also be explored in App ID and used as per the requirement.
- From the user's social media profile, this application uses user's name only. There are other attributes which can be used for personalization in the application. The user's email id can be used for email notification in the application. You may use user's photo as well retrieved from Facebook profile.
- The personalized
Newsservice returns top 10 finance news of the last seven days. This is configured in theNewsservice.
This code pattern is licensed under the Apache Software License, Version 2. Separate third-party code objects invoked within this code pattern are licensed by their respective providers pursuant to their own separate licenses. Contributions are subject to the Developer Certificate of Origin, Version 1.1 (DCO) and the Apache Software License, Version 2.






