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

Site24x7 - Full stack It Infrastructure Monitoring from the cloud. Sign up for free trial.

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


Site24x7 - Full stack It Infrastructure Monitoring from the cloud. Sign up for free trial.

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

Published at DZone with permission of Niklas Heidloff, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

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

{{ parent.tldr }}

{{ parent.urlSource.name }}