SDK-142 : Use ActivityDetails helper in the example and amend user pr…

…ofile display (#16) * SDK-142 : Use ActivityDetails helper in the example and amend profile display * SDK-142 : Make the profile display nicer in the example
getyoti · Jan 18, 2018 · 01efe3b · 01efe3b
1 parent 1fc2540
commit 01efe3b
Show file tree

Hide file tree

Showing 4 changed files with 92 additions and 26 deletions.
diff --git a/example/composer.lock b/example/composer.lock
diff --git a/example/css/style.css b/example/css/style.css
@@ -0,0 +1,31 @@
+
+body {
+    margin-left: 33%;
+}
+/*DL, DT, DD TAGS LIST DATA*/
+dl {
+    margin-bottom:50px;
+}
+
+dl dt {
+    background:#5f9be3;
+    color:#fff;
+    float:left;
+    font-weight:bold;
+    margin-right:10px;
+    margin-bottom: 5px;
+    padding:5px;
+    float:left;
+    clear:both;
+    width:130px;
+}
+
+dl dd {
+    margin:2px 0;
+    padding:5px 0;
+    float:left;
+}
+
+dl dd img {
+    width: 100px;
+}
diff --git a/example/index.html b/example/index.html
@@ -1,20 +1,24 @@
 <!DOCTYPE html>
 <html>
     <head>
-        <script src="https://sdk.yoti.com/clients/browser.2.0.1.js"></script>
         <meta charset="utf-8">
         <title>Your Site</title>
+
+        <link rel="stylesheet" type="text/css" href="css/style.css">
+
+        <script src="https://sdk.yoti.com/clients/browser.2.0.1.js"></script>
     </head>
     <body>
         <h1>Your Site Information</h1>
         <span data-yoti-application-id="your App ID"
             data-yoti-type="inline"
-            data-yoti-scenario-id="your Scenario ID"
-            data-size="small">
-         Use Yoti!
+            data-yoti-scenario-id="your Scenario ID">
+         Use Yoti
         </span>
+
+        <!-- Initiate Yoti button -->
+        <script>
+            _ybg.init()
+        </script>
     </body>
-    <script>
-        _ybg.init()
-    </script>
 </html>
diff --git a/example/profile.php b/example/profile.php
@@ -3,6 +3,8 @@
 // Make sure you run composer update inside the example folder before trying this example out
 require_once './vendor/autoload.php';
 
+use Yoti\Helper\ActivityDetailsHelper;
+
 // Log any error message
 $errorMsg = '';
 // Get the token
@@ -16,7 +18,10 @@
 try {
     $yotiClient = new Yoti\YotiClient($config['sdkId'], $config['pemFile']);
     $profile = $yotiClient->getActivityDetails($token);
-    $selfie = base64_encode($profile->getSelfie());
+    // Create a base 64 selfie URI to be embedded in an HTML document
+    $base64Selfie = ActivityDetailsHelper::getBase64Selfie($profile);
+    // Create selfie image file.
+    file_put_contents('selfie.jpeg', $profile->getSelfie(), LOCK_EX);
 } catch(\Exception $e) {
     $errorMsg = "Error - {$e->getMessage()}";
 }
@@ -25,22 +30,46 @@
 <html>
    <head>
         <meta charset="utf-8">
-        <title>PROFILE PAGE</title>
+        <title>Yoti Profile</title>
+
+        <link rel="stylesheet" type="text/css" href="css/style.css">
    </head>
    <body>
         <?php if (!empty($errorMsg)) : ?>
             <p><strong><?php echo $errorMsg ?></strong></p>
         <?php else: ?>
-            <strong>Given Name(s)</strong> <?php echo $profile->getGivenNames() ?><br>
-            <strong>Family Name</strong> <?php echo $profile->getFamilyName() ?><br>
-            <strong>Phone</strong> <?php echo $profile->getPhoneNumber() ?><br>
-            <strong>Email</strong> <?php echo $profile->getEmailAddress() ?><br>
-            <strong>Date Of Birth</strong> <?php echo $profile->getDateOfBirth() ?><br>
-            <strong>Address</strong> <?php echo $profile->getPostalAddress() ?><br>
-            <strong>Gender</strong> <?php echo $profile->getGender() ?><br>
-            <strong>Nationality</strong> <?php echo $profile->getNationality() ?><br>
-            <strong>Photo</strong><br> <img src="data:image/x-icon;base64,<?php echo $selfie ?>" />
-            <br>
+            <h1>Yoti User Profile</h1>
+            <dl>
+                <dt>Given Name(s)</dt>
+                <dd><?php echo $profile->getGivenNames() ?></dd>
+
+                <dt>Family Name</dt>
+                <dd><?php echo $profile->getFamilyName() ?></dd>
+
+                <dt>Phone</dt>
+                <dd><?php echo $profile->getPhoneNumber() ?></dd>
+
+                <dt>Email</dt>
+                <dd><?php echo $profile->getEmailAddress() ?></dd>
+
+                <dt>Date Of Birth</dt>
+                <dd><?php echo $profile->getDateOfBirth() ?></dd>
+
+                <dt>Address</dt>
+                <dd><?php echo $profile->getPostalAddress() ?></dd>
+
+                <dt>Gender</dt>
+                <dd><?php echo $profile->getGender() ?></dd>
+
+                <dt>Nationality</dt>
+                <dd><?php echo $profile->getNationality() ?></dd>
+
+                <dt>Selfie as base64 data</dt>
+                <dd><img src="<?php echo $base64Selfie ?>" /></dd>
+
+                <dt>Selfie as image file</dt>
+                <dd><img src="./<?php echo $selfieFile ?>" /></dd>
+            </dl>
         <?php endif; ?>
    </body>
  </html>