Warning: make sure that you have read through the Plivo Web SDK Quick-Start Guide and the Make Outgoing Calls Tutorial before you start this tutorial.


Login Manually

In the Make call with a browser section, the user and password of the SIP endpoint were passed to the web phone from the rout setup on the server. We can also prompt a login page asking the user to enter their credentials. After successfully logging in, the user can start making calls.

Add the following lines code to your html file. This will create a login form.


<form id="login_box" title="Login" style="">
    <label>Username</label>
    <input type="text" name="username" value="" id="username">
    <br/>
    <label>Password</label>
    <input type="password" name="password" value="" id="password">
    <br/>
    <input class="btn" type="button" id="btn_login" onclick="login()" value="Login">
</form>

You can pass the entered credentials to the login js function using the id of the text box.


function login() {
    Plivo.conn.login($("#username").val(), $("#password").val());
}

To initiate a call, you will still follow the same steps as in the Step 5: Test it Out in the Make an Outgoing Call tutorial. However, you will first be prompted with a login screen where you will need to enter your Plivo SIP Endpoint credentials that you created in Step 2: Create a SIP Endpoint of the Make an Outgoing Call tutorial. login to your app


Login Automatically

The username and password of the sip endpoint can be hardcoded in the login js function. Then, the user is automatically authorized to make calls on loading the web page. This function can be called in onReady js function.


function login() {
    var username = 'abcd123456@phone.plivo.com';
    var password = 'password';
    Plivo.conn.login(username, password);
}
function onReady() {
    login();
    console.log("onReady...");
}

Next Steps

Learn how to Receive Incoming Calls.

  1. Web SDK Quick Start
  2. Make a Call With a Browser to a Phone Number
  3. Make a Call With a Browser to a SIP Endpoint
  4. Hangup the Call
  5. Manually Input Destination Phone Numbers
  6. Pre-program Destination Phone Numbers (Click-to-call)
  7. Receive Incoming Calls
  8. Create Dynamic SIP Endpoints