Рубрики
Без рубрики

Учебник: Как безопасно реализовать HTML5 Android Android

В этом коротком посте мы создадим пример приложения входа в систему. Просмотр входа в систему и базовая логика будет создана в HTML, CSS и JavaScript, в то время как общее приложение и определенные элементы пользовательского интерфейса будут созданы в программировании XML и Java Android.

Автор оригинала: Michael Hantler.

Поскольку потребность в мобильных приложениях продолжает расти, утилита гибрида HTML5-нативного развития достигает новых высот. В этом коротком руководстве мы рассмотрим, как интегрировать веб-приложения в наших собственных приложений Android, в том числе как создать безопасный JavaScript-Java Bridge.

Пример входа в систему

В этом коротком руководстве мы создадим пример приложения входа в систему. Просмотр входа в систему и базовая логика будет создана в HTML, CSS и JavaScript, в то время как общее приложение и определенные элементы пользовательского интерфейса будут созданы в программировании XML и Java Android. В конце концов мы получим что-то, что выглядит так

HTML5 аспект гибридного приложения

Для этого образца входа в систему мы создадим небольшое веб-приложение, которое имитирует работу входа в систему. Сначала нам нужно создать папку WWW для хранения наших веб-активов. Затем позвольте нам создать index.html в этой папке WWW и еще две папки CSS и JS, чтобы мы имели следующее:

Теперь мы создадим простой HTML-форма, чтобы наш индекс .HTML выглядит как:







     

     Safe Hybrid App

     

     





     


          
LOGIN


          


  
username


  


  
password

Эта простая форма имеет два поля ввода для имени пользователя и пароля, и после нажатия кнопки мы вызовите текущую пустую функцию входа в систему. HTML должен в настоящее время выглядеть как

Так что теперь давайте создадим файл CSS, называемый styles.css и добавлять его в нашу папку CSS. CSS, которые мы использовали для этого учебника

styles.css
body {

     background-color:rgba(255,255,255,0.1);

}

 

h1 {

     color: #001940;

     text-align: center;

     font-family: "Courier New";

     font-size: 50px;

     padding: 10px;

     margin: 0px;

}

 
#login{

     width:70%;

     margin:0 auto;

     margin-top:10%;

     margin-bottom:2%;

     padding: 2%;

     background-color: #eeeeee;

     border: 5px solid #0047B2;

     border-radius: 15px;
}



.btn {

     width: 50%;

     background-color: rgba(160, 204, 20, 0.5);

     border: 1px solid #0047B2;

     border-radius: 10px;

     margin: 0 auto;

     height: 50px;

     display: block;

}

 

input{

     width: 100%;

     background-color: rgba(12, 158, 232, 0.1);

     border: 1px solid #0047B2;

     border-radius: 10px;

     height: 40px;

     text-align: center;

     margin-top: 10px;

     margin-bottom: 10px;

}


.label{

     margin-left: auto;

     margin-right: auto;

     width: 100%;

     text-align: center;

     vertical-align: middle;

}

Теперь добавить ссылку на файл CSS в главном элементе нашего index.html, чтобы он стилизовал наш HTML в соответствии с Styles.css. Наш главный элемент в нашем index.html теперь должен выглядеть так:



    

    Safe Hybrid App

Давайте также теперь создаем файл для пользовательского JavaScript для компонентов Java, мы будем реализовывать в ближайшее время. Давайте позвоним файл Bridge.js И поместите его в нашу папку JS и добавьте ссылку на этот файл, чтобы элемент головы в нашем index.html Теперь выглядит как:


    

    Safe Hybrid App

Как только мы закончили начальный дизайн для нашего веб-приложения, нам нужно создать проект в нашем предпочтительном IDE (Eclipse или Intellij/Android Studio), а затем мы можем интегрировать это веб-приложение в нашу структуру проекта. Для целей методик, используемых в этом руководстве, минимальный SDK может быть установлен как API 8.

Структура проекта

Содержание для нашего веб-приложения может быть загружено из локальных активов или с удаленного (веб-сайтов). Предупреждение: загрузка ненадежного контента с удаленных активов может рисковать безопасностью устройства и информации пользователей. В этом примере мы выберем более безопасный вариант и загружать только местные активы.

Мы собираемся сохранить наше веб-приложение в папке WWW внутри папки локальных активов. Для того, чтобы соответствовать стандартам развития, окончательная структура должна быть следующей для

Проект на основе затмения : Обязательно создайте папку активов (если она еще не существует) на том же уровне, что и папки SRC и REC для вашего проекта. Затем создайте папку WWW внутри этой папки активов и скопируйте файлы, которые мы ранее были созданы в этот каталог. Ваш конечный результат должен выглядеть как изображение ниже.

Интеллийский или Android-студийный проект: Создайте папку активов на том же уровне, что и папки Java и RES (SRC/Main/). Затем создайте папку WWW внутри этой папки активов и скопируйте файлы, которые мы ранее были созданы в этот каталог. Когда вы закончили, он должен напоминать изображение ниже.

WebView: веб-контейнер для Android

Теперь, когда мы объединили активы веб-приложений в нашу структуру проекта, нам нужно будет загрузить его в наше приложение Android. Компонент WebView в Android позволит нам не только загружать это локальное веб-приложение, но и контролировать и манипулировать им.

Теперь создайте XML для активности (если оно еще не существует), которое пройдет наше веб-приложение. XML будет просто содержать веб-просмотр и прогресс для отображения моделирования аутентификации из нашего веб-приложения. Конечный результат должен выглядеть что-то вроде следующего

activity_main.xml

Затем мы создадим нашу основную деятельность (если оно еще не существует), которое будет размещать наше веб-приложение и разместить гибридный мост и инициализирует переменные для нашего WebView и нашего ProgressBar.

MainActivity.java
public class MainActivity extends ActionBarActivity {

     /**CONSTANTS**/

     private static final String TAG = MainActivity.class.getCanonicalName();

     /**MEMBERS**/

     private WebView mWebView;

     private ProgressBar mLoading;


     protected void onCreate(Bundle savedInstanceState) {

          super.onCreate(savedInstanceState);

          setContentView(R.layout.activity_main);

          mWebView = (WebView)findViewById(R.id.wvPortal);

          mLoading = (ProgressBar) findViewById(R.id.pbLoading);

     }

}

Интернет-приложение init.

Теперь, когда у нас есть наш веб-просмотр нам в нашем приложении Android, мы можем инициализировать наше веб-приложение. Чтобы загрузить наше веб-приложение из наших местных активов, мы будем использовать метод WebView loadurl (строковый URL) И мы также включим JavaScript в нашем WebView, который по умолчанию отключен.

protected void onCreate(Bundle savedInstanceState) {

          super.onCreate(savedInstanceState);

          setContentView(R.layout.activity_main);

          mWebView = (WebView)findViewById(R.id.wvPortal);

          mLoading = (ProgressBar) findViewById(R.id.pbLoading);

          mWebView.loadUrl("file:///android_asset/www/index.html");

          WebSettings mWebSettings = mWebView.getSettings();

          mWebSettings.setJavaScriptEnabled(true);
       
     }

Теперь у нас должен быть нужный пользовательский интерфейс в нашем приложении Android, а теперь для подключения нашего веб-приложения с нашим родным Android Code.

JavaScript для связи Java

Способ для инъекций объектов Java в веб-просмотр является методом AddJavascriptiNterface WebView. Из-за его рисков безопасности, особенно на устройствах, работающих на Android ранее, чем 4.2, мы будем использовать немного другой техники в этом руководстве. Если вы решите использовать этот метод для JavaScript на Java Communication, убедитесь, что у вас есть рассмотрел все риски безопасности и уязвимости перед реализацией.

Чтобы извлечь сообщения из нашего веб-приложения в нашем WebView, мы переопределим механизм подсказки JavaScript, переопределив Chrome Client для нашего WebView. Мы сделаем это, установив новый клиент через SetWebchRomeClient (). Мы определим нашего клиента в качестве внутреннего частного класса в нашей магистрату. Ява, как показано ниже (компиляционные ошибки будут объяснены в следующих направлениях.)

private class BridgeWCClient extends WebChromeClient{

     @Override

     public boolean onJsPrompt(WebView view, String url, String title,

  String message, JsPromptResult result) {

          if(title.equals(BRIDGE_KEY)){

  JSONObject commandJSON = null;

  try{

       commandJSON = new JSONObject(message);

       processCommand(commandJSON);

  }

  catch(JSONException ex){

       //Received an invalid json

       Log.e(TAG, "Invalid JSON: " + ex.getMessage());

       result.confirm();

       return true;

  }

  result.confirm();

  return true;

          }

          else{

  return false;

          }   

     }

}

В нашем пользовательском WebchRomeClient мы переопределим функцию для всех JSPROMPTS, отправленные из нашего JavaScript и для любого, которые имеют заголовок, равный brance_key (определите этот строковый ключ в вашей java и javaScript и обязательно защищать свой код для дополнительной безопасности), то это будет Обработано как команда для нас, чтобы запускать в нашем коде Java (любой без этого заголовка будет рассматриваться как обычные JSPROMPTS). Мы обработаем код как JSonobject для этого урока следующим образом.

private void processCommand(JSONObject commandJSON)

  throws JSONException{

     String command = commandJSON.getString("method");

     if("login".equals(command)){

          int state = commandJSON.getInt("state");

          if(state == 0){

  MainActivity.this.runOnUiThread(new Runnable() {

       @Override

       public void run() {

            mLoading.setVisibility(View.VISIBLE);

       }

  });

          }

          else if(state == 1){

  MainActivity.this.runOnUiThread(new Runnable() {

       @Override

       public void run() {

            mLoading.setVisibility(View.GONE);

       }

  });

          }

     }

}

Этот код позволяет нам показывать загрузку SPINNER PROGEBAR, когда JavaScript отправляет команду входа в систему с состоянием 0, и скрывать программу ProgressBar, когда JavaScript отправляет команду «входа» с состоянием 1. Теперь нам нужно добавить это как наш WebchRomeClient, добавив к концу нашего OnCreate:

protected void onCreate(Bundle savedInstanceState) {

     super.onCreate(savedInstanceState);

…

mWebView.setWebChromeClient(new BridgeWCClient());

}

Теперь добавить соответствующий код JavaScript для завершения нашего JavaScript на Java Bridge на наш ранее созданный Bridge.js (должен быть в папке www/js.)

var Bridge = {};

Bridge.login = function(state){

     //build json string

     var message = {method:"login", state:state}

     prompt(BRIDGE_KEY, JSON.stringify(message));

}

Теперь мы можем добавить в наш оригинальный вход в систему обратного вызова следующего кода, чтобы показать прогрессBar в нашем коде Java, а затем скрыть его после 3 секунды, чтобы имитировать некоторые другие действия.

function login(){

     Bridge.login(0);

     //simulate some login operations

     window.setTimeout(

          function(){

  Bridge.login(1);}, 3000);

}

Теперь, как только мы запустим наше обновленное приложение, мы можем нажать кнопку входа, а прогресс-панель должен быть показан в течение 3 секунд

Java для связи JavaScript

Для окончательного аспекта нашего моста мы включим связь от нашего Java-кода к нашему коду JavaScript, работающему в нашем веб-приложении. Это можно просто сделать, используя тот же вызов LoadurL, используемый для загрузки самого веб-приложения. Чтобы вызвать определенную функцию JavaScript, мы просто добавляем префикс «JavaScript:» на наш строковый аргумент Loadurl, чтобы вызвать функцию вместо загрузки нового веб-контента.

Во-первых, давайте добавим функцию обратного вызова к нашему Bridge.js , где он получит результат из нашего кода Java, а затем, если в логе удалось показать предупреждение. Наше Bridge.js теперь должен выглядеть как:

var Bridge = {};


Bridge.login = function(state){

     //build json string

     var message = {method:"login", state:state}

     prompt("bridge_key", JSON.stringify(message));

}


Bridge.callBack = function(result){

     if(result.success){

          alert("login success");

     }

}

Для этого усугубления мы отправим сообщение на наш JavaScript, когда мы спрятали ProgressBar, добавив к нашему описанию метода ProcessCommand (штат), чтобы он читал:

…
else if(state == 1){

MainActivity.this.runOnUiThread(new Runnable() {

          @Override

  public void run() {

       mLoading.setVisibility(View.GONE);

       mWebView.loadUrl("javascript:Bridge.callBack({success:true, message:\"logged in\"})");

  }

     });

}
…

И с этим добавлением мы теперь видим сообщение о предупреждении, представленном, когда код Java заканчивает, скрывая прогресс. Теперь мы можем общаться между нашим кодом Java и приложением JavaScript, работающем в нашем WebView, и мы эффективно создали безопасное гибридное приложение HTML5, включая безопасный мост.

Более продвинутые темы

Этот учебник коснулся только темы создания гибридных приложений HTML5 в Android, и есть еще много компонентов и возможностей, которые могут быть использованы для продвижения функций гибридного приложения (например, возможность контроля компонентов URL-загрузки путем переопределения метода поощрения поощрения WebViewClient или возможность удаленно отладки вашего приложения, включив отладку через SetWebcontentsDebuggangeNeabled (True)). Есть также платформы, такие как Phonegap которые предлагают полнофункциональные возможности для разработки HTML5 гибридных приложений.

Читайте ещё по теме: