Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Accessing Bluemix Services From Client-Side Web Apps

DZone's Guide to

Accessing Bluemix Services From Client-Side Web Apps

Want to bring Bluemix's cloud services to your web app? Learn how to access your credentials so your client-side web apps can reap the rewards.

· Cloud Zone ·
Free Resource

Insight into the right steps to take for migrating workloads to public cloud and successfully reducing cost as a result. Read the Guide.

Bluemix is IBM’s cloud platform to build and host applications that can leverage more than 100 services — for example, databases and cognitive services. The services provide APIs that require credentials. Applications that are hosted on Bluemix as Cloud Foundry apps or Docker containers can access these credentials from environment variables. This article describes how to invoke Bluemix services from client-side web applications.

Recently, I described how to deploy Angular and other client-side web applications (for example React or Vue.js) to Bluemix via Docker and nginx. In order to allow web applications to invoke REST APIs, nginx acts as a proxy that can be configured in your nginx.conf file.

I couldn’t figure out how to configure/extend the nginx proxy to access the credentials from environment variables. That’s why I replaced nginx with a web server built with Node.js and the Express framework.

There are various proxy server implementations for Express available, or you can write a simple proxy yourself. The following code shows a proxy for GET requests that read the credentials of the Watson Conversation service and adds them to the request.

router.get('*', (req, res) => {
    var vcapCredentials = readCredentials();
    var credentials = req.get('Authorization');
    if (vcapCredentials.username && vcapCredentials.password) {
        credentials = "Basic " + new Buffer(vcapCredentials.username + ':' + vcapCredentials.password).toString('base64');
    }
    var url = 'https://gateway.watsonplatform.net/conversation' + req.url;
    var newRequest = request.get({
        uri: url,
        headers: {
            'Content-Type': 'application/json',
            'Authorization': credentials
        }
    });
    newRequest.pipe(res);
});


The full source code of the sample application is available on GitHub.

The screenshot shows the requests from the web application to the Node.js backend. With /credentials, the web application checks whether the credentials exist, which is the case when a Watson Conversation service has been bound to the Node.js application. If they exist, the two input fields for username and password are disabled. The ‘/conversation/api/v1/workspaces‘ request invokes the proxy.

node-proxy


TrueSight Cloud Cost Control provides visibility and control over multi-cloud costs including AWS, Azure, Google Cloud, and others.

Topics:
cloud ,ibm bluemix ,client-side ,web app ,tutorial

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}